Upload src/app/search/page.tsx

src/app/search/page.tsx

@@ -1,34 +1,21 @@
 'use client'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
+import { categories, districts, searchVendors, sortVendors } from '@/lib/vendors'
+import { useApp } from '@/lib/app-context'
 
-const cats = ['All','Venues','Photographers','Florists','Catering','Music & DJ','Bridal Wear','Decorators']
-const dists = ['All Districts','Colombo 1-7','Colombo 8-15','Kandy','Galle','Negombo','Battaramulla']
-const sorts = ['Relevance','Rating','Price: Low–High','Price: High–Low']
-const vendors = [
-  { id:'1', name:'The Grand Atrium', cat:'Venues', dist:'Colombo 7', price:350000, rating:4.9, rev:127, emoji:'🏛️' },
-  { id:'2', name:'Lens & Light Studio', cat:'Photographers', dist:'Colombo 3', price:150000, rating:4.8, rev:94, emoji:'📸' },
-  { id:'3', name:'Bloom & Petal', cat:'Florists', dist:'Colombo 5', price:80000, rating:4.9, rev:68, emoji:'💐' },
-  { id:'4', name:'Silver Spoon Catering', cat:'Catering', dist:'Colombo 4', price:250000, rating:4.7, rev:112, emoji:'🍽️' },
-  { id:'5', name:'Melody Makers', cat:'Music & DJ', dist:'Colombo 6', price:75000, rating:4.6, rev:45, emoji:'🎵' },
-  { id:'6', name:'Elegance Bridal', cat:'Bridal Wear', dist:'Colombo 7', price:120000, rating:4.8, rev:56, emoji:'👗' },
-  { id:'7', name:'Dream Decor', cat:'Decorators', dist:'Kandy', price:95000, rating:4.7, rev:72, emoji:'✨' },
-  { id:'8', name:'Sunset Gardens', cat:'Venues', dist:'Galle', price:400000, rating:4.9, rev:88, emoji:'🌅' },
-]
+const sorts = ['Relevance', 'Rating', 'Price: Low–High', 'Price: High–Low', 'Most Reviewed']
 
 export default function SearchPage() {
   const [cat, setCat] = useState('All')
   const [dist, setDist] = useState('All Districts')
   const [sort, setSort] = useState('Relevance')
   const [q, setQ] = useState('')
-  const [shortlist, setShortlist] = useState<string[]>([])
+  const { toggleShortlist, isShortlisted } = useApp()
 
-  const toggle = (id:string) => setShortlist(p => p.includes(id) ? p.filter(x=>x!==id) : [...p,id])
-  const filtered = vendors.filter(v => {
-    if (cat !== 'All' && v.cat !== cat) return false
-    if (dist !== 'All Districts' && v.dist !== dist) return false
-    if (q && !v.name.toLowerCase().includes(q.toLowerCase())) return false
-    return true
-  })
+  const results = useMemo(() => {
+    const filtered = searchVendors(q, cat, dist)
+    return sortVendors(filtered, sort)
+  }, [q, cat, dist, sort])
 
   return (
     <div className="min-h-screen bg-ivory-50">
@@ -36,27 +23,68 @@ export default function SearchPage() {
         <div className="wedding-section">
           <h1 className="font-heading text-3xl font-semibold text-charcoal-700 mb-4">Explore Vendors</h1>
           <div className="flex flex-wrap gap-3">
-            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search vendors..." className="wedding-input max-w-md flex-1" />
-            <select value={sort} onChange={e=>setSort(e.target.value)} className="wedding-input w-auto">{sorts.map(s=><option key={s}>{s}</option>)}</select>
+            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search vendors..." className="wedding-input max-w-md flex-1" />
+            <select value={sort} onChange={e => setSort(e.target.value)} className="wedding-input w-auto">
+              {sorts.map(s => <option key={s}>{s}</option>)}
+            </select>
           </div>
         </div>
       </div>
+
       <div className="wedding-section py-8">
         <div className="flex gap-8">
           <aside className="hidden lg:block w-56 shrink-0">
             <div className="wedding-card p-5 space-y-6 sticky top-24">
               <div>
                 <h3 className="font-heading text-sm font-semibold text-charcoal-700 mb-3">Category</h3>
-                <div className="space-y-1.5">{cats.map(c=><button key={c} onClick={()=>setCat(c)} className={"block text-sm w-full text-left px-3 py-1.5 rounded-lg "+ (cat===c?'bg-charcoal-700 text-ivory-50':'text-charcoal-400 hover:bg-ivory-100')}>{c}</button>)}</div>
+                <div className="space-y-1.5">
+                  {categories.map(c => (
+                    <button key={c} onClick={() => setCat(c)}
+                      className={`block text-sm w-full text-left px-3 py-1.5 rounded-lg ${cat===c?'bg-charcoal-700 text-ivory-50':'text-charcoal-400 hover:bg-ivory-100'}`}>
+                      {c}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <h3 className="font-heading text-sm font-semibold text-charcoal-700 mb-3">District</h3>
+                <select value={dist} onChange={e => setDist(e.target.value)} className="wedding-input text-sm">
+                  {districts.map(d => <option key={d}>{d}</option>)}
+                </select>
               </div>
-              <div><h3 className="font-heading text-sm font-semibold text-charcoal-700 mb-3">District</h3><select value={dist} onChange={e=>setDist(e.target.value)} className="wedding-input text-sm">{dists.map(d=><option key={d}>{d}</option>)}</select></div>
-              {shortlist.length>0 && <div className="pt-4 border-t border-ivory-200"><a href="/shortlist" className="wedding-btn-gold w-full text-sm">Compare ({shortlist.length})</a></div>}
             </div>
           </aside>
+
           <div className="flex-1">
-            <p className="text-sm text-charcoal-400 mb-4">{filtered.length} vendors found</p>
+            <p className="text-sm text-charcoal-400 mb-4">{results.length} vendor{results.length!==1?'s':''} found</p>
             <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
-              {filtered.map(v=><a key={v.id} href={"/vendor/"+v.id} className="wedding-card-hover overflow-hidden group"><div className="h-40 bg-gradient-to-br from-ivory-200 to-rose-50 flex items-center justify-center text-5xl">{v.emoji}</div><div className="p-4"><div className="flex items-center justify-between mb-2"><span className="text-xs text-charcoal-300">{v.cat}</span><button onClick={e=>{e.preventDefault();toggle(v.id)}} className={"text-lg "+(shortlist.includes(v.id)?'text-rose-400':'text-charcoal-200 hover:text-rose-400')}>{shortlist.includes(v.id)?'♥':'♡'}</button></div><h3 className="font-heading text-base font-semibold text-charcoal-700 mb-1">{v.name}</h3><p className="text-xs text-charcoal-400 mb-3">{v.dist}</p><div className="flex items-center justify-between"><div className="flex items-center gap-1"><span className="text-gold-400 text-sm">★</span><span className="text-sm font-medium text-charcoal-600">{v.rating}</span><span className="text-xs text-charcoal-300">({v.rev})</span></div><span className="text-sm font-semibold text-charcoal-700">₨{v.price.toLocaleString()}</span></div></div></a>)}
+              {results.map(v => {
+                const shortlisted = isShortlisted(v.id)
+                return (
+                  <a key={v.id} href={`/vendor/${v.id}`} className="wedding-card-hover overflow-hidden group">
+                    <div className="h-40 bg-gradient-to-br from-ivory-200 to-rose-50 flex items-center justify-center text-5xl">{v.image}</div>
+                    <div className="p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-xs text-charcoal-300">{v.category}</span>
+                        <button onClick={e => { e.preventDefault(); toggleShortlist(v.id) }}
+                          className={`text-lg transition-colors ${shortlisted?'text-rose-400':'text-charcoal-200 hover:text-rose-400'}`}>
+                          {shortlisted ? '♥' : '♡'}
+                        </button>
+                      </div>
+                      <h3 className="font-heading text-base font-semibold text-charcoal-700 mb-1">{v.name}</h3>
+                      <p className="text-xs text-charcoal-400 mb-3">{v.district}</p>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-1">
+                          <span className="text-gold-400 text-sm">★</span>
+                          <span className="text-sm font-medium text-charcoal-600">{v.rating}</span>
+                          <span className="text-xs text-charcoal-300">({v.reviews})</span>
+                        </div>
+                        <span className="text-sm font-semibold text-charcoal-700">₨{(v.priceMin/1000).toFixed(0)}K+</span>
+                      </div>
+                    </div>
+                  </a>
+                )
+              })}
             </div>
           </div>
         </div>