x
This commit is contained in:
Your Name committed
1 parent
d325cd8763
commit
c6bf2f70ac
45 files changed
+5195
-338
No files matched your search
@@ -4,7 +4,8 @@ import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import EmptyState from '../components/EmptyState'
|
||||
import { API_BASE, type Category, type Product } from '../types'
|
||||
import DynamicPageRenderer from '../components/DynamicPageRenderer'
|
||||
import { API_BASE, type Category, type Product, type PageSection } from '../types'
|
||||
|
||||
export default function SearchPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
@@ -15,11 +16,28 @@ export default function SearchPage() {
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searched, setSearched] = useState(false)
|
||||
const [cmsSections, setCmsSections] = useState<PageSection[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/pages/search-layout`)
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error('Page not found');
|
||||
return r.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data && data.sections) {
|
||||
setCmsSections(data.sections);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('Search dynamic layout sections not loaded:', err.message);
|
||||
});
|
||||
}, [])
|
||||
|
||||
const doSearch = useCallback(async (q: string) => {
|
||||
if (!q.trim()) { setProducts([]); setSearched(false); return }
|
||||
setLoading(true)
|
||||
@@ -46,54 +64,76 @@ export default function SearchPage() {
|
||||
setSearchParams(input.trim() ? { q: input.trim() } : {})
|
||||
}
|
||||
|
||||
const announcementSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() === 'ANNOUNCEMENT_BAR');
|
||||
const heroSections = cmsSections.filter(s => s.isActive && (s.type.toUpperCase() === 'HERO' || s.type.toUpperCase() === 'BANNER'));
|
||||
const bottomSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() !== 'ANNOUNCEMENT_BAR' && s.type.toUpperCase() !== 'HERO' && s.type.toUpperCase() !== 'BANNER');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer
|
||||
sections={announcementSections}
|
||||
categories={categories}
|
||||
categoriesLoading={loading}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Search Header */}
|
||||
<div className="pt-32 pb-16 px-6 bg-spa-light border-b border-spa-stone/10">
|
||||
<div className="max-w-3xl mx-auto space-y-6 text-center">
|
||||
<p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-bold opacity-80">
|
||||
Discover
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold text-pop-black">Search Products</h1>
|
||||
{heroSections.length > 0 ? (
|
||||
<div className="pt-20">
|
||||
<DynamicPageRenderer
|
||||
sections={heroSections}
|
||||
categories={categories}
|
||||
categoriesLoading={loading}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="pt-32 pb-16 px-6 bg-spa-light border-b border-spa-stone/10">
|
||||
<div className="max-w-3xl mx-auto space-y-6 text-center">
|
||||
<p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-bold opacity-80">
|
||||
Discover
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold text-pop-black">Search Products</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative">
|
||||
<div className="flex bg-white border border-spa-stone/20 rounded-2xl overflow-hidden shadow-sm focus-within:border-spa-forest focus-within:ring-1 focus-within:ring-spa-forest transition-all">
|
||||
<svg className="w-5 h-5 text-spa-stone m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Search by scent name, category..."
|
||||
className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-pop-black placeholder-spa-stone/60"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-spa-forest text-white px-8 font-bold text-xs uppercase tracking-widest hover:bg-spa-stone transition-colors shrink-0"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
<form onSubmit={handleSubmit} className="relative">
|
||||
<div className="flex bg-white border border-spa-stone/20 rounded-2xl overflow-hidden shadow-sm focus-within:border-spa-forest focus-within:ring-1 focus-within:ring-spa-forest transition-all">
|
||||
<svg className="w-5 h-5 text-spa-stone m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Search by scent name, category..."
|
||||
className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-pop-black placeholder-spa-stone/60"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-spa-forest text-white px-8 font-bold text-xs uppercase tracking-widest hover:bg-spa-stone transition-colors shrink-0"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Quick category links */}
|
||||
<div className="flex flex-wrap justify-center gap-2 pt-2">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/search?q=${encodeURIComponent(cat.name)}`}
|
||||
className="bg-white border border-spa-stone/20 px-4 py-1.5 rounded-full text-xs font-medium text-spa-stone hover:border-spa-forest hover:text-spa-forest shadow-sm transition-all duration-300"
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Quick category links */}
|
||||
<div className="flex flex-wrap justify-center gap-2 pt-2">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/search?q=${encodeURIComponent(cat.name)}`}
|
||||
className="bg-white border border-spa-stone/20 px-4 py-1.5 rounded-full text-xs font-medium text-spa-stone hover:border-spa-forest hover:text-spa-forest shadow-sm transition-all duration-300"
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-16 space-y-8">
|
||||
@@ -131,6 +171,14 @@ export default function SearchPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer
|
||||
sections={bottomSections}
|
||||
categories={categories}
|
||||
categoriesLoading={loading}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user