115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
'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;
|