vibeasite-templates/template-ecommerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: ecommerce template (24 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:55:41 +00:00
parent 526cb7c62f
commit 7fbda8a570
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Search.tsx
+4 -4
View File
@@ -38,7 +38,7 @@ export default function SearchPage() {
const renderStars = (count: number) => const renderStars = (count: number) =>
Array.from({ length: 5 }, (_, i) => ( Array.from({ length: 5 }, (_, i) => (
<Star key={i} className={`h-3 w-3 \${i < count ? "fill-amber-400 text-amber-400" : "text-stone-300"}`} /> <Star key={i} className={`h-3 w-3 ${i < count ? "fill-amber-400 text-amber-400" : "text-stone-300"}`} />
)); ));
return ( return (
@@ -80,7 +80,7 @@ export default function SearchPage() {
key={chip} key={chip}
variant={activeFilter === chip ? "default" : "outline"} variant={activeFilter === chip ? "default" : "outline"}
size="sm" size="sm"
className={`rounded-full text-sm \${activeFilter === chip ? "bg-stone-900" : ""}`} className={`rounded-full text-sm ${activeFilter === chip ? "bg-stone-900" : ""}`}
onClick={() => setActiveFilter(chip)} onClick={() => setActiveFilter(chip)}
> >
{chip} {chip}
@@ -94,7 +94,7 @@ export default function SearchPage() {
{filtered.map((product) => ( {filtered.map((product) => (
<Link to="/product" key={product.id} className="group"> <Link to="/product" key={product.id} className="group">
<Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300"> <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div className={`relative aspect-[3/4] bg-gradient-to-br \${product.gradient} overflow-hidden`}> <div className={`relative aspect-[3/4] bg-gradient-to-br ${product.gradient} overflow-hidden`}>
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} /> <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
<div className="absolute top-1/4 -left-8 h-24 w-24 rounded-full bg-white/30 blur-2xl" /> <div className="absolute top-1/4 -left-8 h-24 w-24 rounded-full bg-white/30 blur-2xl" />
<div className="absolute bottom-1/4 -right-8 h-20 w-20 rounded-full bg-white/20 blur-2xl" /> <div className="absolute bottom-1/4 -right-8 h-20 w-20 rounded-full bg-white/20 blur-2xl" />
@@ -106,7 +106,7 @@ export default function SearchPage() {
<CardContent className="p-3"> <CardContent className="p-3">
<h3 className="font-medium text-xs truncate">{product.name}</h3> <h3 className="font-medium text-xs truncate">{product.name}</h3>
<div className="flex items-center gap-0.5 mt-1">{renderStars(product.rating)}</div> <div className="flex items-center gap-0.5 mt-1">{renderStars(product.rating)}</div>
<p className="mt-1.5 font-semibold text-sm">\${product.price}</p> <p className="mt-1.5 font-semibold text-sm">${product.price}</p>
</CardContent> </CardContent>
</Card> </Card>
</Link> </Link>