|
| 1 | +import { useState, type ChangeEvent } from "react"; |
| 2 | +import { getIconData, iconToSVG } from "@iconify/utils"; |
| 3 | +// @ts-ignore virtual module |
| 4 | +import iconCollection from "virtual:astro-icon"; |
| 5 | +import { type CollectionEntry } from "astro:content"; |
| 6 | + |
| 7 | +const ProductCatalog = ({ |
| 8 | + products, |
| 9 | +}: { |
| 10 | + products: CollectionEntry<"products">[]; |
| 11 | +}) => { |
| 12 | + const [filters, setFilters] = useState<{ |
| 13 | + search: string; |
| 14 | + groups: string[]; |
| 15 | + }>({ |
| 16 | + search: "", |
| 17 | + groups: [], |
| 18 | + }); |
| 19 | + |
| 20 | + const groups = [...new Set(products.map((product) => product.groups).flat())]; |
| 21 | + |
| 22 | + const productList = products.filter((product) => { |
| 23 | + if (filters.groups.length > 0) { |
| 24 | + if ( |
| 25 | + filters.groups.filter((val) => product.groups.includes(val)).length === |
| 26 | + 0 |
| 27 | + ) { |
| 28 | + return false; |
| 29 | + } |
| 30 | + } |
| 31 | + |
| 32 | + if (filters.search) { |
| 33 | + if ( |
| 34 | + !product.data.name.toLowerCase().includes(filters.search.toLowerCase()) |
| 35 | + ) { |
| 36 | + return false; |
| 37 | + } |
| 38 | + } |
| 39 | + |
| 40 | + return true; |
| 41 | + }); |
| 42 | + |
| 43 | + return ( |
| 44 | + <div className="md:flex"> |
| 45 | + <div className="md:w-1/4 w-full mr-8"> |
| 46 | + <input |
| 47 | + type="text" |
| 48 | + 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" |
| 49 | + placeholder="Search products" |
| 50 | + value={filters.search} |
| 51 | + onChange={(e) => setFilters({ ...filters, search: e.target.value })} |
| 52 | + /> |
| 53 | + |
| 54 | + <div className="!mb-8 md:block hidden"> |
| 55 | + <span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold"> |
| 56 | + Groups |
| 57 | + </span> |
| 58 | + |
| 59 | + {groups.map((group) => ( |
| 60 | + <label key={group} className="block !my-2"> |
| 61 | + <input |
| 62 | + type="checkbox" |
| 63 | + className="mr-2" |
| 64 | + value={group} |
| 65 | + onChange={(e: ChangeEvent<HTMLInputElement>) => { |
| 66 | + if (e.target.checked) { |
| 67 | + setFilters({ |
| 68 | + ...filters, |
| 69 | + groups: [...filters.groups, e.target.value], |
| 70 | + }); |
| 71 | + } else { |
| 72 | + setFilters({ |
| 73 | + ...filters, |
| 74 | + groups: filters.groups.filter( |
| 75 | + (f) => f !== e.target.value, |
| 76 | + ), |
| 77 | + }); |
| 78 | + } |
| 79 | + }} |
| 80 | + />{" "} |
| 81 | + {group} |
| 82 | + </label> |
| 83 | + ))} |
| 84 | + </div> |
| 85 | + </div> |
| 86 | + |
| 87 | + <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"> |
| 88 | + {productList.length === 0 && ( |
| 89 | + <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"> |
| 90 | + <span className="text-lg !font-bold">No products found</span> |
| 91 | + <p> |
| 92 | + Try a different search term, or broaden your search by removing |
| 93 | + filters. |
| 94 | + </p> |
| 95 | + </div> |
| 96 | + )} |
| 97 | + {productList.map((product, idx) => { |
| 98 | + const iconData = getIconData(iconCollection.local, product.id); |
| 99 | + let icon = null; |
| 100 | + if (iconData) { |
| 101 | + icon = iconToSVG(iconData); |
| 102 | + } |
| 103 | + return ( |
| 104 | + <a |
| 105 | + href={product.data.product.url} |
| 106 | + 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" |
| 107 | + > |
| 108 | + <div className="flex items-center"> |
| 109 | + {icon && ( |
| 110 | + <div className="rounded-full p-2 bg-orange-50 mr-2 text-orange-500"> |
| 111 | + <svg |
| 112 | + {...icon.attributes} |
| 113 | + width={28} |
| 114 | + height={28} |
| 115 | + dangerouslySetInnerHTML={{ __html: icon.body }} |
| 116 | + /> |
| 117 | + </div> |
| 118 | + )} |
| 119 | + {!icon && ( |
| 120 | + <div className="flex items-center justify-center leading-none rounded-full p-2 bg-orange-50 mr-2 text-[color:var(--orange-accent-200)] text-xl font-bold w-11 h-11"> |
| 121 | + {product.data.name.substr(0, 1)} |
| 122 | + </div> |
| 123 | + )} |
| 124 | + <span className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap"> |
| 125 | + {product.data.name} |
| 126 | + </span> |
| 127 | + </div> |
| 128 | + {product.data.meta && ( |
| 129 | + <p className="!mt-2 line-clamp-2 text-sm leading-6"> |
| 130 | + {product.data.meta.description} |
| 131 | + </p> |
| 132 | + )} |
| 133 | + </a> |
| 134 | + ); |
| 135 | + })} |
| 136 | + </div> |
| 137 | + </div> |
| 138 | + ); |
| 139 | +}; |
| 140 | + |
| 141 | +export default ProductCatalog; |
0 commit comments