new architecture wip

Author: 514sid

src/components/About.astro

@@ -0,0 +1,117 @@
+import { useCallback, useMemo } from 'react'
+import type { Product } from '../utils/productsSchema'
+import { ProductLogo } from './ProductLogo'
+import { useProducts } from '../hooks/useProducts'
+import { VirtualizedTable } from './VirtualizedTable'
+import type { ColumnDef } from '@tanstack/react-table'
+import { cmsProductPricingSortingFn, getCMSProductPricingPreview } from '../utils/cmsProductPricing'
+
+const useProductHelpers = () => {
+	const getPricingDisplay = useCallback((product: Product) => getCMSProductPricingPreview(product), [])
+
+	const getHeadquarters = useCallback((product: Product) => {	
+		if (Array.isArray(product.headquarters)) {
+			if (product.headquarters.length > 1) {
+				return `${product.headquarters[0]} (+${product.headquarters.length - 1})`
+			}
+			return product.headquarters[0]
+		}
+		return product.headquarters
+	}, [])
+
+	const getScreensDisplay = useCallback((product: Product) => {
+		const screensTotal = product.stats?.screens?.total
+		if (screensTotal && typeof screensTotal === 'number') {
+			return screensTotal
+		}
+		return '-'
+	}, [])
+
+	return { getPricingDisplay, getHeadquarters, getScreensDisplay }
+}
+
+const useTableColumns = () => {
+	const { getPricingDisplay, getHeadquarters, getScreensDisplay } = useProductHelpers()
+
+	return useMemo<ColumnDef<Product>[]>(
+		() => [
+			{
+				header: 'Product',
+				accessorKey: 'name',
+				size: 500,
+				sortingFn: 'alphanumeric',
+				cell: ({ row }) => {
+					const product = row.original
+					return (
+						<a
+							href={product.website}
+							target="_blank"
+							rel="noopener nofollow ugc"
+							className="flex items-center gap-3 group"
+						>
+							<ProductLogo product={product} />
+							<div className="flex flex-col">
+								<div className="flex items-center gap-2 font-medium text-gray-900 group-hover:text-blue-600">
+									{product.name}
+								</div>
+								{product.description && (
+									<div className="text-sm text-gray-500 mt-1 max-w-md">
+										{product.description}
+									</div>
+								)}
+							</div>
+						</a>
+					)
+				},
+			},
+			{
+				header: 'Pricing per screen',
+				accessorFn: (row) => getPricingDisplay(row),
+				size: 200,
+				sortingFn: cmsProductPricingSortingFn,
+				cell: ({ getValue }) => (
+					<span className="text-sm text-gray-600">{getValue() as string}</span>
+				),
+			},
+			{
+				header: 'Signup',
+				accessorFn: (row) => row.self_signup ? 'Self-signup' : 'On request',
+				size: 150,
+				cell: ({ getValue }) => (
+					<span className="text-sm text-gray-600">{getValue() as string}</span>
+				),
+			},
+			{
+				header: 'Headquarters',
+				accessorFn: (row) => getHeadquarters(row),
+				size: 200,
+				cell: ({ getValue }) => (
+					<span className="text-sm text-gray-600">{getValue() as string}</span>
+				),
+			},
+			{
+				header: 'Screens',
+				accessorFn: (row) => getScreensDisplay(row),
+				size: 150,
+				sortingFn: 'alphanumeric',
+				cell: ({ getValue }) => (
+					<span className="text-sm text-gray-600">{ `${(getValue() as number) > 0 ? (getValue() as number).toLocaleString() + '+' : '-'}` }</span>
+				),
+			},
+		],
+		[getPricingDisplay, getHeadquarters, getScreensDisplay]
+	)
+}
+
+export const CMSList = () => {
+	const products = useProducts()
+	const columns = useTableColumns()
+
+	return (
+		<VirtualizedTable
+			data={products}
+			columns={columns}
+			initialSorting={[{ id: 'name', desc: false }]}
+		/>
+	)
+}

src/components/BottomMenu.tsx

@@ -0,0 +1,43 @@
+import { useStore } from '@nanostores/react'
+import { productFilters, setCategoryFilter } from '../stores/productFilters'
+import type { ProductCategory } from '../utils/productsSchema'
+import { products } from '../utils/products'
+import { useMemo } from 'react'
+import { filterProducts } from '../utils/filterProducts'
+
+export const CategoryFilter = () => {
+	const filters = useStore(productFilters)
+	
+	const allCategories: ProductCategory[] = ['CMS', 'Content provider']
+
+	const categoryCounts = useMemo(() => {
+		return allCategories.reduce((acc, category) => {
+			acc[category] = filterProducts(products, { ...filters, category }).length
+			return acc
+		}, {} as Record<ProductCategory, number>)
+	}, [filters.searchTerm, filters.showOpenSource, filters.showProprietary])
+
+	const handleCategoryClick = (category: ProductCategory) => {
+		setCategoryFilter(category)
+	}
+    
+	return (
+		<div className="flex flex-col space-y-4">
+			<div className="flex flex-wrap gap-2">
+				{allCategories.map((category) => (
+					<button
+						key={category}
+						onClick={() => handleCategoryClick(category)}
+						className={`px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 border border-gray-300 hover:border-gray-400 ${
+							filters.category === category
+								? 'bg-blue-500 text-white border-blue-500'
+								: 'bg-white text-gray-700 hover:bg-gray-50'
+						}`}
+					>
+						{category} ({categoryCounts[category]})
+					</button>
+				))}
+			</div>
+		</div>
+	)
+}

src/components/CMSList.tsx

@@ -0,0 +1,6 @@
+import { useFilterSync } from '../hooks/useFilterSync'
+
+export const FilterSync = () => {
+	useFilterSync()
+	return null
+}