File size: 2,540 Bytes
851da48 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React, { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { products } from "../data/products.js";
export default function Store() {
const [q, setQ] = useState("");
const filtered = useMemo(() => {
const term = q.trim().toLowerCase();
if (!term) return products;
return products.filter((p) =>
[p.name, p.category, p.tagline].some((x) => x.toLowerCase().includes(term))
);
}, [q]);
return (
<div className="space-y-6">
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div>
<h2 className="text-3xl font-semibold tracking-tight">Store</h2>
<p className="text-neutral-600">Browse products (demo data).</p>
</div>
<div className="w-full md:w-80">
<label className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Search</label>
<input
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder="Search products..."
className="mt-2 w-full rounded-xl border border-neutral-300 bg-white px-4 py-2.5 text-sm outline-none focus:border-neutral-900"
/>
</div>
</div>
<div className="grid gap-4 md:grid-cols-3">
{filtered.map((p) => (
<Link
key={p.slug}
to={`/product/${p.slug}`}
className="group rounded-3xl border border-neutral-200 bg-white p-5 hover:shadow-sm"
>
<div className="overflow-hidden rounded-2xl border border-neutral-200">
<img
src={p.heroImage}
alt={p.name}
className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
loading="lazy"
/>
</div>
<div className="pt-4">
<p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
<h3 className="pt-1 text-lg font-semibold tracking-tight">{p.name}</h3>
<p className="pt-1 text-sm text-neutral-600">{p.tagline}</p>
<p className="pt-3 text-sm font-semibold text-neutral-900">From ${p.priceFrom}</p>
</div>
</Link>
))}
</div>
{filtered.length === 0 ? (
<div className="rounded-2xl border border-neutral-200 bg-neutral-50 p-6 text-neutral-700">
No results. Try a different search term.
</div>
) : null}
</div>
);
}
|