Deploy

src/components/shop/ProductSort.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { ArrowUpDown } from 'lucide-react'
+
+export type SortOption = 'featured' | 'price-asc' | 'price-desc' | 'newest' | 'name-asc'
+
+interface ProductSortProps {
+  value: SortOption
+  onChange: (v: SortOption) => void
+  count: number
+}
+
+const SORT_LABELS: Record<SortOption, string> = {
+  featured:   'Featured',
+  'price-asc':  'Price: Low to High',
+  'price-desc': 'Price: High to Low',
+  newest:     'Newest',
+  'name-asc':   'Name: A–Z',
+}
+
+export default function ProductSort({ value, onChange, count }: ProductSortProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-3 border-b border-border">
+      <p className="text-sm text-muted-foreground">
+        {count} product{count !== 1 ? 's' : ''}
+      </p>
+      <div className="flex items-center gap-2">
+        <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
+        <select
+          value={value}
+          onChange={e => onChange(e.target.value as SortOption)}
+          className="text-sm bg-background border border-border rounded-lg px-3 py-1.5 text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 cursor-pointer"
+        >
+          {(Object.keys(SORT_LABELS) as SortOption[]).map(opt => (
+            <option key={opt} value={opt}>{SORT_LABELS[opt]}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}