create-ecom-app 1.0.0

package/templates/ecommerce/app/register/page.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Eye, EyeOff, Zap, ShoppingBag, ArrowRight, Mail, Lock, User } from 'lucide-react';
+import { useAuthStore } from '@/store/useAuthStore';
+
+// ⚠️ Defined outside to prevent focus loss bug
+interface InputFieldProps {
+  id: string;
+  label: string;
+  type: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  icon: React.ElementType;
+  suffix?: React.ReactNode;
+  error?: string;
+}
+function InputField({ id, label, type, value, onChange, placeholder, icon: Icon, suffix, error }: InputFieldProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1.5">{label}</label>
+      <div className="relative">
+        <div className="absolute inset-y-0 left-3.5 flex items-center pointer-events-none">
+          <Icon className="w-4 h-4 text-gray-400" />
+        </div>
+        <input
+          id={id}
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className={`input pl-10 pr-10 ${error ? 'border-red-400' : ''}`}
+          required
+        />
+        {suffix && <div className="absolute inset-y-0 right-3 flex items-center">{suffix}</div>}
+      </div>
+      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+    </div>
+  );
+}
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const { register } = useAuthStore();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPass, setShowPass] = useState(false);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    if (password.length < 6) { setError('Password must be at least 6 characters.'); return; }
+    setIsLoading(true);
+    await new Promise((r) => setTimeout(r, 800));
+    register(name, email, password);
+    const authed = useAuthStore.getState().isAuthenticated;
+    setIsLoading(false);
+    if (authed) {
+      router.push('/');
+    } else {
+      setError('An account with this email already exists.');
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* ── LEFT PANEL ── */}
+      <div className="hidden lg:flex lg:w-1/2 text-white flex-col justify-between p-12 relative overflow-hidden" style={{ background: 'linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)' }}>
+        
+        {/* Blue glow spots */}
+        <div className="absolute inset-0 pointer-events-none" style={{
+          backgroundImage: `
+            radial-gradient(circle at 15% 70%, rgba(59,130,246,0.2) 0%, transparent 50%),
+            radial-gradient(circle at 85% 20%, rgba(96,165,250,0.15) 0%, transparent 45%),
+            radial-gradient(circle at 50% 95%, rgba(37,99,235,0.18) 0%, transparent 40%)
+          `,
+        }} />
+
+        {/* Floating Bubbles */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          {[
+            { w: 32, h: 32, left: '10%',  dur: '8s',  delay: '0s',   color: 'rgba(59,130,246,0.15)', border: 'rgba(59,130,246,0.3)' },
+            { w: 18, h: 18, left: '25%',  dur: '6s',  delay: '2s',   color: 'rgba(96,165,250,0.15)',   border: 'rgba(96,165,250,0.35)' },
+            { w: 44, h: 44, left: '45%',  dur: '10s', delay: '0.8s', color: 'rgba(37,99,235,0.1)', border: 'rgba(37,99,235,0.2)' },
+            { w: 22, h: 22, left: '65%',  dur: '7s',  delay: '3.5s', color: 'rgba(59,130,246,0.15)',  border: 'rgba(59,130,246,0.35)'},
+            { w: 14, h: 14, left: '80%',  dur: '5s',  delay: '1s',   color: 'rgba(96,165,250,0.2)',   border: 'rgba(96,165,250,0.4)'  },
+            { w: 36, h: 36, left: '55%',  dur: '9s',  delay: '4.5s', color: 'rgba(59,130,246,0.1)', border: 'rgba(59,130,246,0.25)' },
+          ].map((b, i) => (
+            <div
+              key={i}
+              className="bubble"
+              style={{
+                width: b.w,
+                height: b.h,
+                left: b.left,
+                background: b.color,
+                border: `1px solid ${b.border}`,
+                backdropFilter: 'blur(2px)',
+                animationDuration: `${b.dur}, ${parseFloat(b.dur) * 1.4}s`,
+                animationDelay: `${b.delay}, ${b.delay}`,
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Logo */}
+        <div className="relative flex items-center gap-2">
+          <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #3b82f6, #2563eb)' }}>
+            <Zap className="w-5 h-5 text-white" />
+          </div>
+          <span className="text-xl font-black tracking-tight">GenZ Shop</span>
+        </div>
+
+        {/* Center content */}
+        <div className="relative">
+          <div className="w-20 h-20 rounded-3xl flex items-center justify-center mb-8" style={{ background: 'rgba(59,130,246,0.15)', border: '1px solid rgba(59,130,246,0.3)' }}>
+            <ShoppingBag className="w-10 h-10 text-blue-400" />
+          </div>
+          <h2 className="text-4xl font-black leading-tight mb-4">
+            Join the<br />
+            <span className="text-transparent bg-clip-text" style={{ backgroundImage: 'linear-gradient(90deg, #93c5fd, #3b82f6, #60a5fa)' }}>
+              Movement.
+            </span>
+          </h2>
+          <p className="text-blue-100/80 leading-relaxed text-lg">
+            Create your account and get exclusive deals, early access to drops, and free shipping on your first order.
+          </p>
+
+          <div className="mt-10 space-y-3">
+            {['✓ Free shipping on first order', '✓ Exclusive member deals', '✓ Easy 30-day returns'].map((perk) => (
+              <div key={perk} className="flex items-center gap-3 rounded-xl px-4 py-2.5" style={{ background: 'rgba(59,130,246,0.12)', border: '1px solid rgba(59,130,246,0.25)' }}>
+                <span className="text-sm font-medium text-white">{perk}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <p className="relative text-blue-200/50 text-sm">© 2024 GenZ Shop</p>
+      </div>
+
+      {/* ── RIGHT PANEL — form ── */}
+      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center p-8 bg-white">
+        <div className="w-full max-w-md">
+          {/* Mobile logo */}
+          <div className="flex items-center gap-2 mb-10 lg:hidden">
+            <div className="w-8 h-8 bg-gray-900 rounded-lg flex items-center justify-center">
+              <Zap className="w-4 h-4 text-white" />
+            </div>
+            <span className="text-lg font-black text-gray-900">GenZ Shop</span>
+          </div>
+
+          <div className="mb-8">
+            <h1 className="text-3xl font-black text-gray-900 mb-1">Create Account</h1>
+            <p className="text-gray-500">Join thousands of GenZ shoppers today</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <InputField id="reg-name" label="Full Name" type="text" value={name} onChange={setName} placeholder="Your name" icon={User} />
+            <InputField id="reg-email" label="Email Address" type="email" value={email} onChange={setEmail} placeholder="you@example.com" icon={Mail} />
+            <InputField
+              id="reg-password"
+              label="Password"
+              type={showPass ? 'text' : 'password'}
+              value={password}
+              onChange={setPassword}
+              placeholder="Min. 6 characters"
+              icon={Lock}
+              suffix={
+                <button type="button" onClick={() => setShowPass(!showPass)} className="text-gray-400 hover:text-gray-700 transition-colors">
+                  {showPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              }
+            />
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3">
+                <p className="text-sm text-red-600">{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full btn-primary py-3.5 text-base flex items-center justify-center gap-2 mt-2"
+              id="register-submit-btn"
+            >
+              {isLoading ? (
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              ) : (
+                <>Create Account <ArrowRight className="w-4 h-4" /></>
+              )}
+            </button>
+
+            <p className="text-xs text-gray-400 text-center">
+              By registering, you agree to our{' '}
+              <Link href="#" className="underline hover:text-gray-700">Terms & Conditions</Link>
+            </p>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-gray-500 text-sm">
+              Already have an account?{' '}
+              <Link href="/login" className="font-bold text-gray-900 hover:underline">
+                Sign In
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/app/wishlist/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { Heart, X, ShoppingCart, ArrowRight } from 'lucide-react';
+import { useWishlistStore } from '@/store/useWishlistStore';
+import { useCartStore } from '@/store/useCartStore';
+import { formatPrice } from '@/lib/utils';
+
+export default function WishlistPage() {
+  const { items, removeItem } = useWishlistStore();
+  const addItem = useCartStore((s) => s.addItem);
+
+  const handleMoveToCart = (productId: string) => {
+    const product = items.find((p) => p.id === productId);
+    if (product) {
+      addItem(product);
+      removeItem(productId);
+    }
+  };
+
+  if (items.length === 0) {
+    return (
+      <div className="container-main py-24 text-center animate-fade-in">
+        <div className="w-24 h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6">
+          <Heart className="w-12 h-12 text-red-400" />
+        </div>
+        <h1 className="page-title">Your wishlist is empty</h1>
+        <p className="text-gray-500 mb-8">Save items you love and come back to them later.</p>
+        <Link href="/products" className="btn-primary inline-flex items-center gap-2">
+          Browse Products <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-main py-10 animate-fade-in">
+      <div className="mb-8">
+        <h1 className="page-title">My Wishlist</h1>
+        <p className="text-gray-500">{items.length} saved {items.length === 1 ? 'item' : 'items'}</p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {items.map((product) => (
+          <div key={product.id} className="card overflow-hidden group">
+            <Link href={`/product/${product.id}`}>
+              <div className="relative aspect-square overflow-hidden bg-gray-100">
+                <Image
+                  src={product.image}
+                  alt={product.name}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-500"
+                  sizes="(max-width: 640px) 100vw, 25vw"
+                />
+              </div>
+            </Link>
+
+            <div className="p-4">
+              <p className="text-xs text-gray-400 uppercase tracking-wider">{product.category}</p>
+              <h3 className="font-semibold text-gray-900 text-sm mt-1 line-clamp-2">{product.name}</h3>
+              <p className="font-bold text-gray-900 mt-2">{formatPrice(product.price)}</p>
+
+              <div className="flex gap-2 mt-4">
+                <button
+                  onClick={() => handleMoveToCart(product.id)}
+                  disabled={!product.inStock}
+                  className="flex-1 flex items-center justify-center gap-1.5 bg-gray-900 text-white text-sm py-2 rounded-lg hover:bg-gray-700 transition-colors active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                  id={`move-to-cart-${product.id}`}
+                >
+                  <ShoppingCart className="w-3.5 h-3.5" />
+                  {product.inStock ? 'Add to Cart' : 'Out of Stock'}
+                </button>
+                <button
+                  onClick={() => removeItem(product.id)}
+                  className="p-2 text-red-400 hover:bg-red-50 rounded-lg transition-colors"
+                  aria-label="Remove from wishlist"
+                  id={`remove-wishlist-${product.id}`}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/components/CartItem.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Image from 'next/image';
+import { useCartStore } from '@/store/useCartStore';
+import type { CartItem as CartItemType } from '@/types';
+import { formatPrice } from '@/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+}
+
+export default function CartItem({ item }: CartItemProps) {
+  const { removeItem, updateQuantity } = useCartStore();
+  const { product, quantity } = item;
+
+  return (
+    <div className="flex gap-4 p-4 bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow">
+      {/* Image */}
+      <div className="relative w-20 h-20 flex-shrink-0 rounded-xl overflow-hidden bg-gray-100">
+        <Image
+          src={product.image}
+          alt={product.name}
+          fill
+          className="object-cover"
+          sizes="80px"
+        />
+      </div>
+
+      {/* Details */}
+      <div className="flex-1 min-w-0">
+        <p className="text-xs text-gray-400 uppercase tracking-wider">{product.category}</p>
+        <h3 className="font-semibold text-gray-900 text-sm mt-0.5 line-clamp-2">{product.name}</h3>
+        <p className="text-sm font-bold text-gray-900 mt-1">{formatPrice(product.price)}</p>
+
+        {/* Quantity Controls */}
+        <div className="flex items-center gap-3 mt-3">
+          <div className="flex items-center border border-gray-200 rounded-lg overflow-hidden">
+            <button
+              onClick={() => updateQuantity(product.id, quantity - 1)}
+              className="px-3 py-1.5 text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium"
+              aria-label="Decrease quantity"
+            >
+              −
+            </button>
+            <span className="px-3 py-1.5 text-sm font-semibold text-gray-900 min-w-[2rem] text-center">
+              {quantity}
+            </span>
+            <button
+              onClick={() => updateQuantity(product.id, quantity + 1)}
+              className="px-3 py-1.5 text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium"
+              aria-label="Increase quantity"
+            >
+              +
+            </button>
+          </div>
+
+          <button
+            onClick={() => removeItem(product.id)}
+            className="text-xs text-red-400 hover:text-red-500 font-medium transition-colors"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+
+      {/* Item Total */}
+      <div className="flex-shrink-0 text-right">
+        <p className="font-bold text-gray-900">
+          {formatPrice(product.price * quantity)}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/components/CheckoutForm.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import type { Address } from '@/types';
+
+// ⚠️ Fix: FormField defined OUTSIDE parent component
+// → prevents re-mounting on every keystroke → no focus loss!
+interface FieldProps {
+  id: string;
+  label: string;
+  type?: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  placeholder?: string;
+}
+
+function FormField({ id, label, type = 'text', value, onChange, error, placeholder }: FieldProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1.5">
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={`input ${error ? 'border-red-400 focus:ring-red-400' : ''}`}
+      />
+      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+    </div>
+  );
+}
+
+interface CheckoutFormProps {
+  onSubmit: (address: Address) => void;
+  isLoading?: boolean;
+}
+
+export default function CheckoutForm({ onSubmit, isLoading }: CheckoutFormProps) {
+  const [form, setForm] = useState<Address>({
+    name: '',
+    email: '',
+    phone: '',
+    address: '',
+    city: '',
+    state: '',
+    pincode: '',
+  });
+  const [errors, setErrors] = useState<Partial<Address>>({});
+
+  const validate = (): boolean => {
+    const newErrors: Partial<Address> = {};
+    if (!form.name.trim()) newErrors.name = 'Name is required';
+    if (!form.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) newErrors.email = 'Valid email required';
+    if (!form.phone.match(/^\d{10}$/)) newErrors.phone = '10-digit phone required';
+    if (!form.address.trim()) newErrors.address = 'Address is required';
+    if (!form.city.trim()) newErrors.city = 'City is required';
+    if (!form.state.trim()) newErrors.state = 'State is required';
+    if (!form.pincode.match(/^\d{6}$/)) newErrors.pincode = '6-digit pincode required';
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (field: keyof Address, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) setErrors((prev) => ({ ...prev, [field]: undefined }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) onSubmit(form);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <FormField id="checkout-name" label="Full Name" value={form.name} onChange={(v) => handleChange('name', v)} error={errors.name} placeholder="John Doe" />
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <FormField id="checkout-email" label="Email" type="email" value={form.email} onChange={(v) => handleChange('email', v)} error={errors.email} placeholder="john@example.com" />
+        <FormField id="checkout-phone" label="Phone" type="tel" value={form.phone} onChange={(v) => handleChange('phone', v)} error={errors.phone} placeholder="9876543210" />
+      </div>
+      <FormField id="checkout-address" label="Delivery Address" value={form.address} onChange={(v) => handleChange('address', v)} error={errors.address} placeholder="House No, Street, Landmark" />
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+        <FormField id="checkout-city" label="City" value={form.city} onChange={(v) => handleChange('city', v)} error={errors.city} placeholder="Chennai" />
+        <FormField id="checkout-state" label="State" value={form.state} onChange={(v) => handleChange('state', v)} error={errors.state} placeholder="Tamil Nadu" />
+        <FormField id="checkout-pincode" label="Pincode" value={form.pincode} onChange={(v) => handleChange('pincode', v)} error={errors.pincode} placeholder="600001" />
+      </div>
+
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="btn-primary w-full flex items-center justify-center gap-2 py-3.5 text-base"
+        id="place-order-btn"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            Placing order...
+          </>
+        ) : (
+          '🛍️ Place Order'
+        )}
+      </button>
+    </form>
+  );
+}

package/templates/ecommerce/components/Filters.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { Star, RotateCcw } from 'lucide-react';
+
+const CATEGORIES = ['All', 'Clothing', 'Footwear', 'Electronics', 'Accessories', 'Lifestyle'];
+
+interface FiltersProps {
+  selectedCategory: string;
+  onCategoryChange: (cat: string) => void;
+  minPrice: number;
+  maxPrice: number;
+  priceRange: [number, number];
+  onPriceChange: (range: [number, number]) => void;
+  minRating: number;
+  onRatingChange: (rating: number) => void;
+  onReset: () => void;
+}
+
+export default function Filters({
+  selectedCategory,
+  onCategoryChange,
+  minPrice,
+  maxPrice,
+  priceRange,
+  onPriceChange,
+  minRating,
+  onRatingChange,
+  onReset,
+}: FiltersProps) {
+  return (
+    <div className="bg-white rounded-2xl shadow-sm p-5 space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold text-gray-900">Filters</h3>
+        <button
+          onClick={onReset}
+          className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-700 transition-colors font-medium"
+        >
+          <RotateCcw className="w-3 h-3" />
+          Reset
+        </button>
+      </div>
+
+      {/* Category */}
+      <div>
+        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Category</p>
+        <div className="flex flex-col gap-1">
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat}
+              onClick={() => onCategoryChange(cat)}
+              className={`text-left px-3 py-2 rounded-xl text-sm font-medium transition-all duration-200
+                ${selectedCategory === cat
+                  ? 'bg-gray-900 text-white'
+                  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                }`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Price Range */}
+      <div>
+        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Price Range</p>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <div className="flex-1">
+              <label className="text-xs text-gray-400 mb-1 block">Min (₹)</label>
+              <input
+                type="number"
+                value={priceRange[0]}
+                min={minPrice}
+                max={priceRange[1] - 1}
+                onChange={(e) => onPriceChange([Number(e.target.value), priceRange[1]])}
+                className="input text-sm"
+                id="price-min"
+              />
+            </div>
+            <span className="text-gray-300 mt-5">—</span>
+            <div className="flex-1">
+              <label className="text-xs text-gray-400 mb-1 block">Max (₹)</label>
+              <input
+                type="number"
+                value={priceRange[1]}
+                min={priceRange[0] + 1}
+                max={maxPrice}
+                onChange={(e) => onPriceChange([priceRange[0], Number(e.target.value)])}
+                className="input text-sm"
+                id="price-max"
+              />
+            </div>
+          </div>
+          <input
+            type="range"
+            min={minPrice}
+            max={maxPrice}
+            value={priceRange[1]}
+            onChange={(e) => onPriceChange([priceRange[0], Number(e.target.value)])}
+            className="w-full accent-gray-900"
+            id="price-slider"
+          />
+          <div className="flex justify-between text-xs text-gray-400">
+            <span>₹{minPrice.toLocaleString('en-IN')}</span>
+            <span>₹{maxPrice.toLocaleString('en-IN')}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Min Rating */}
+      <div>
+        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Min Rating</p>
+        <div className="flex flex-col gap-1">
+          {[0, 3, 3.5, 4, 4.5].map((r) => (
+            <button
+              key={r}
+              onClick={() => onRatingChange(r)}
+              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-sm transition-all duration-200 
+                ${minRating === r
+                  ? 'bg-gray-900 text-white'
+                  : 'text-gray-600 hover:bg-gray-50'
+                }`}
+            >
+              {r === 0 ? (
+                <span>All Ratings</span>
+              ) : (
+                <>
+                  <div className="flex">
+                    {[1, 2, 3, 4, 5].map((s) => (
+                      <Star key={s} className={`w-3 h-3 ${s <= r ? 'text-amber-400 fill-amber-400' : (minRating === r ? 'text-gray-200 fill-gray-200' : 'text-gray-300 fill-gray-300')}`} />
+                    ))}
+                  </div>
+                  <span>{r}+ stars</span>
+                </>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}