Seed: ecommerce template (24 files)

src/pages/Search.tsx

@@ -38,7 +38,7 @@ export default function SearchPage() {
 
   const renderStars = (count: number) =>
     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 (
@@ -80,7 +80,7 @@ export default function SearchPage() {
               key={chip}
               variant={activeFilter === chip ? "default" : "outline"}
               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)}
             >
               {chip}
@@ -94,7 +94,7 @@ export default function SearchPage() {
             {filtered.map((product) => (
               <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">
-                  <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 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" />
@@ -106,7 +106,7 @@ export default function SearchPage() {
                   <CardContent className="p-3">
                     <h3 className="font-medium text-xs truncate">{product.name}</h3>
                     <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>
                 </Card>
               </Link>