|
| 1 | +import { useEffect, useState, type ChangeEvent } from "react"; |
| 2 | +import type { CollectionEntry } from "astro:content"; |
| 3 | +import type { IconifyIconBuildResult } from "@iconify/utils"; |
| 4 | + |
| 5 | +export type ProductData = CollectionEntry<"products"> & { |
| 6 | + icon?: IconifyIconBuildResult; |
| 7 | + groups: string[]; |
| 8 | +}; |
| 9 | + |
| 10 | +const ProductCatalog = ({ products }: { products: ProductData[] }) => { |
| 11 | + const [filters, setFilters] = useState<{ |
| 12 | + search: string; |
| 13 | + groups: string[]; |
| 14 | + }>({ |
| 15 | + search: "", |
| 16 | + groups: [], |
| 17 | + }); |
| 18 | + |
| 19 | + const groups = [...new Set(products.map((product) => product.groups).flat())]; |
| 20 | + |
| 21 | + const productList = products.filter((product) => { |
| 22 | + if (filters.groups.length > 0) { |
| 23 | + if ( |
| 24 | + filters.groups.filter((val) => product.groups.includes(val)).length === |
| 25 | + 0 |
| 26 | + ) { |
| 27 | + return false; |
| 28 | + } |
| 29 | + } |
| 30 | + |
| 31 | + if (filters.search) { |
| 32 | + if ( |
| 33 | + !product.data.name.toLowerCase().includes(filters.search.toLowerCase()) |
| 34 | + ) { |
| 35 | + return false; |
| 36 | + } |
| 37 | + } |
| 38 | + |
| 39 | + return true; |
| 40 | + }); |
| 41 | + |
| 42 | + useEffect(() => { |
| 43 | + // On component load, check for deep-links to groups in the query param |
| 44 | + const params = new URLSearchParams(window.location.search); |
| 45 | + const groups = params.get("product-group"); |
| 46 | + |
| 47 | + if (!groups) return; |
| 48 | + |
| 49 | + setFilters({ |
| 50 | + ...filters, |
| 51 | + groups: [groups], |
| 52 | + }); |
| 53 | + }, []); |
| 54 | + |
| 55 | + return ( |
| 56 | + <div className="md:flex"> |
| 57 | + <div className="md:w-1/4 w-full mr-8"> |
| 58 | + <input |
| 59 | + type="text" |
| 60 | + className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2" |
| 61 | + placeholder="Search products" |
| 62 | + value={filters.search} |
| 63 | + onChange={(e) => setFilters({ ...filters, search: e.target.value })} |
| 64 | + /> |
| 65 | + |
| 66 | + <div className="!mb-8 md:block hidden"> |
| 67 | + <span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold"> |
| 68 | + Groups |
| 69 | + </span> |
| 70 | + |
| 71 | + {groups.map((group) => ( |
| 72 | + <label key={group} className="block !my-2"> |
| 73 | + <input |
| 74 | + type="checkbox" |
| 75 | + className="mr-2" |
| 76 | + value={group} |
| 77 | + checked={filters.groups.includes(group)} |
| 78 | + onChange={(e: ChangeEvent<HTMLInputElement>) => { |
| 79 | + if (e.target.checked) { |
| 80 | + setFilters({ |
| 81 | + ...filters, |
| 82 | + groups: [...filters.groups, e.target.value], |
| 83 | + }); |
| 84 | + } else { |
| 85 | + setFilters({ |
| 86 | + ...filters, |
| 87 | + groups: filters.groups.filter( |
| 88 | + (f) => f !== e.target.value, |
| 89 | + ), |
| 90 | + }); |
| 91 | + } |
| 92 | + }} |
| 93 | + />{" "} |
| 94 | + {group} |
| 95 | + </label> |
| 96 | + ))} |
| 97 | + </div> |
| 98 | + </div> |
| 99 | + |
| 100 | + <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 lg:gap-4 lg:w-3/4 w-full items-stretch self-start !mt-0"> |
| 101 | + {productList.length === 0 && ( |
| 102 | + <div className="border lg:col-span-3 md:col-span-2 bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6"> |
| 103 | + <span className="text-lg !font-bold">No products found</span> |
| 104 | + <p> |
| 105 | + Try a different search term, or broaden your search by removing |
| 106 | + filters. |
| 107 | + </p> |
| 108 | + </div> |
| 109 | + )} |
| 110 | + {productList.map((product) => { |
| 111 | + return ( |
| 112 | + <a |
| 113 | + href={product.data.product.url} |
| 114 | + className="self-stretch p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md block !text-inherit no-underline hover:bg-gray-50 dark:hover:bg-black" |
| 115 | + > |
| 116 | + <div className="flex items-start"> |
| 117 | + {product.icon && ( |
| 118 | + <div className="rounded-full p-1 bg-orange-50 mr-2 text-orange-500 dark:bg-orange-950"> |
| 119 | + <svg |
| 120 | + {...product.icon.attributes} |
| 121 | + width={24} |
| 122 | + height={24} |
| 123 | + dangerouslySetInnerHTML={{ __html: product.icon.body }} |
| 124 | + /> |
| 125 | + </div> |
| 126 | + )} |
| 127 | + {!product.icon && ( |
| 128 | + <div className="flex items-center justify-center leading-none rounded-full p-1 bg-orange-50 dark:bg-orange-950 mr-2 text-[color:var(--orange-accent-200)] text-lg font-bold w-8 h-8"> |
| 129 | + {product.data.name.substr(0, 1)} |
| 130 | + </div> |
| 131 | + )} |
| 132 | + <span className="font-semibold text-md mt-0.5"> |
| 133 | + {product.data.name} |
| 134 | + </span> |
| 135 | + </div> |
| 136 | + {product.data.meta && ( |
| 137 | + <p className="!mt-2 line-clamp-2 text-sm leading-6"> |
| 138 | + {product.data.meta.description} |
| 139 | + </p> |
| 140 | + )} |
| 141 | + </a> |
| 142 | + ); |
| 143 | + })} |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + ); |
| 147 | +}; |
| 148 | + |
| 149 | +export default ProductCatalog; |
0 commit comments