bender/deb59af8-503e-4edb-87e5-21c336a34be6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_11_1777217071707 into main #9

Merged
bender merged 1 commits from version_11_1777217071707 into main 2026-04-26 15:25:53 +00:00
Conversation 0 Commits 1 Files Changed 1 +36 -23
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/sections/product/ProductRatingCards.tsx
View File

@@ -20,6 +20,7 @@ type ProductRatingCardsProps = {
rating: number;
reviewCount: string;
imageSrc: string;
description?: string;
onClick?: () => void;
}[];
};
@@ -42,6 +43,7 @@ const ProductRatingCards = ({
rating: p.rating || 0,
reviewCount: p.reviewCount || "0",
imageSrc: p.imageSrc,
description: p.description || "Detailed description coming soon...",
onClick: p.onProductClick,
}))
: productsProp;
@@ -99,36 +101,47 @@ const ProductRatingCards = ({
<button
key={product.name}
onClick={product.onClick}
className="group h-full flex flex-col gap-5 p-5 text-left card rounded cursor-pointer"
className="group h-full perspective-1000 cursor-pointer text-left"
>
<div className="aspect-square rounded overflow-hidden">
<ImageOrVideo imageSrc={product.imageSrc} />
</div>
<div className="relative w-full h-full transform-style-preserve-3d transition-transform duration-700 group-hover:rotate-y-180">
{/* Front Face */}
<div className="relative w-full h-full backface-hidden flex flex-col gap-5 p-5 card rounded">
<div className="aspect-square rounded overflow-hidden">
<ImageOrVideo imageSrc={product.imageSrc} />
</div>
<div className="flex flex-col gap-2">
<span className="secondary-button w-fit px-2 py-0.5 text-sm text-secondary-cta-text rounded">{product.brand}</span>
<div className="flex flex-col gap-2">
<span className="secondary-button w-fit px-2 py-0.5 text-sm text-secondary-cta-text rounded">{product.brand}</span>
<div className="flex flex-col gap-1">
<h3 className="text-xl font-medium truncate">{product.name}</h3>
<div className="flex flex-col gap-1">
<h3 className="text-xl font-medium truncate">{product.name}</h3>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"size-4 text-accent",
index < Math.floor(product.rating) ? "fill-accent" : "opacity-20"
)}
strokeWidth={1.5}
/>
))}
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"size-4 text-accent",
index < Math.floor(product.rating) ? "fill-accent" : "opacity-20"
)}
strokeWidth={1.5}
/>
))}
</div>
<span className="text-sm">({product.reviewCount})</span>
</div>
</div>
<span className="text-sm">({product.reviewCount})</span>
<p className="text-2xl font-medium">{product.price}</p>
</div>
</div>
<p className="text-2xl font-medium">{product.price}</p>
{/* Back Face */}
<div className="absolute inset-0 backface-hidden rotate-y-180 p-5 card rounded flex flex-col items-center justify-center text-center">
<h3 className="text-xl font-medium mb-4">{product.name}</h3>
<p className="text-base opacity-80">{product.description || "Detailed description coming soon..."}</p>
</div>
</div>
</button>
))}
@@ -139,4 +152,4 @@ const ProductRatingCards = ({
);
};
export default ProductRatingCards;
export default ProductRatingCards;