update design

2026-06-10 13:47:50 -04:00
parent b5a79b6475
commit b212250da0
96 changed files with 7486 additions and 6441 deletions
--- a/components/shopify/search-dialog.tsx
+++ b/components/shopify/search-dialog.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Command } from 'cmdk';
+import { RiSearchLine } from '@remixicon/react';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Loader } from '@/components/ui/loader';
+import { getProducts, type Product } from '@/hooks/use-shopify-products';
+
+interface SearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const SearchDialog: React.FC<SearchDialogProps> = ({ open, onOpenChange }) => {
+  const router = useRouter();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [query, setQuery] = useState('');
+
+  // Load the catalog once per open; cmdk filters it as the user types
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    getProducts({ first: 100, sortKey: 'TITLE' })
+      .then((data) => {
+        if (!cancelled) setProducts(data);
+      })
+      .catch((err) => {
+        console.error('Failed to load products for search:', err);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const handleSelect = (handle: string) => {
+    onOpenChange(false);
+    router.push(`/products/${handle}`);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden [&>button]:hidden">
+        <DialogTitle className="sr-only">Search products</DialogTitle>
+        <Command label="Search products">
+          <div className="flex items-center gap-2 border-b border-gray-200 px-4">
+            <RiSearchLine size={16} className="text-gray-400 shrink-0" />
+            <Command.Input
+              value={query}
+              onValueChange={setQuery}
+              placeholder="Search products..."
+              className="h-12 w-full bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400"
+            />
+          </div>
+          <Command.List className="max-h-80 overflow-y-auto p-2">
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader size={20} />
+              </div>
+            ) : (
+              <>
+                <Command.Empty className="py-8 text-center text-sm text-gray-500">
+                  No products found.
+                </Command.Empty>
+                {products.map((product) => {
+                  const image = product.images.edges[0]?.node;
+                  const price = product.priceRange.minVariantPrice;
+
+                  return (
+                    <Command.Item
+                      key={product.id}
+                      value={product.title}
+                      onSelect={() => handleSelect(product.handle)}
+                      className="flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm data-[selected=true]:bg-gray-100"
+                    >
+                      <div className="w-10 h-10 bg-gray-100 overflow-hidden shrink-0">
+                        {image && (
+                          <img
+                            src={image.url}
+                            alt={image.altText || product.title}
+                            className="w-full h-full object-cover"
+                          />
+                        )}
+                      </div>
+                      <span className="flex-1 truncate font-medium text-gray-900">
+                        {product.title}
+                      </span>
+                      <span className="text-gray-500 shrink-0">
+                        ${parseFloat(price.amount).toFixed(2)}
+                      </span>
+                    </Command.Item>
+                  );
+                })}
+              </>
+            )}
+          </Command.List>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SearchDialog;