68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { Suspense } from 'react';
|
||
import { products } from '@/lib/data';
|
||
import { Search } from 'lucide-react';
|
||
import ProductCard from '@/components/productcard';
|
||
|
||
|
||
// کامپوننت داخلی برای هندل کردن جستجو
|
||
function SearchResults() {
|
||
const searchParams = useSearchParams();
|
||
const query = searchParams.get('q') || '';
|
||
|
||
// فیلتر کردن محصولات بر اساس جستجو
|
||
const results = products.filter(p =>
|
||
p.title.toLowerCase().includes(query.toLowerCase()) ||
|
||
p.brand?.toLowerCase().includes(query.toLowerCase()) ||
|
||
p.d?.toLowerCase().includes(query.toLowerCase()) ||
|
||
p.l?.toLowerCase().includes(query.toLowerCase())
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<div className="flex items-center gap-3 mb-8 border-b border-gray-100 pb-6">
|
||
<div className="bg-blue-50 p-3 rounded-2xl text-blue-600">
|
||
<Search size={28} />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-800">نتایج جستجو برای: "{query}"</h1>
|
||
<p className="text-sm text-gray-500 mt-1">{results.length} مورد پیدا شد</p>
|
||
</div>
|
||
</div>
|
||
|
||
{results.length > 0 ? (
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{results.map((product) => (
|
||
<ProductCard key={product.id} product={product} />
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-20 bg-gray-50 rounded-3xl">
|
||
<p className="text-gray-500 text-lg">متاسفیم، کالایی با این مشخصات پیدا نشد.</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// کامپوننت اصلی صفحه که Suspense را پیادهسازی میکند
|
||
export default function SearchPage() {
|
||
return (
|
||
<div className="container mx-auto px-4 py-12 min-h-screen">
|
||
{/*
|
||
استفاده از Suspense برای جلوگیری از خطای Deopt در Next.js
|
||
هنگام استفاده از useSearchParams
|
||
*/}
|
||
<Suspense fallback={
|
||
<div className="flex justify-center items-center py-20 text-gray-500">
|
||
در حال جستجو...
|
||
</div>
|
||
}>
|
||
<SearchResults />
|
||
</Suspense>
|
||
</div>
|
||
);
|
||
}
|