aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/product-card.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/product-card.tsx')
-rw-r--r--frontend/src/components/product-card.tsx52
1 files changed, 26 insertions, 26 deletions
diff --git a/frontend/src/components/product-card.tsx b/frontend/src/components/product-card.tsx
index f790c98..25717f4 100644
--- a/frontend/src/components/product-card.tsx
+++ b/frontend/src/components/product-card.tsx
@@ -71,16 +71,16 @@ export function ProductCard({
return (
<Card
- className="group relative overflow-hidden border-0 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer"
+ className="group relative overflow-hidden border-0 shadow-sm hover:shadow-xl dark:shadow-black/30 dark:hover:shadow-black/50 transition-all duration-300 cursor-pointer bg-white dark:bg-neutral-900"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Link href={`/product/${id}`}>
<div className="relative overflow-hidden">
{/* Product Image */}
- <div className="aspect-[3/4] bg-neutral-100 relative overflow-hidden">
+ <div className="aspect-[3/4] bg-neutral-100 dark:bg-neutral-800 relative overflow-hidden">
<div
- className="w-full h-full bg-gradient-to-br from-neutral-200 to-neutral-300 flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
+ className="w-full h-full bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center transition-transform duration-300 group-hover:scale-105"
style={{
backgroundImage: `url(${allImages[currentImage]})`,
backgroundSize: 'cover',
@@ -88,9 +88,9 @@ export function ProductCard({
}}
>
{/* Placeholder for actual images */}
- <div className="text-center text-neutral-500">
- <div className="w-16 h-16 bg-neutral-400 rounded-full mx-auto mb-2 flex items-center justify-center">
- <ShoppingBag className="w-8 h-8 text-white" />
+ <div className="text-center text-neutral-500 dark:text-neutral-400">
+ <div className="w-16 h-16 bg-neutral-400 dark:bg-neutral-700 rounded-full mx-auto mb-2 flex items-center justify-center">
+ <ShoppingBag className="w-8 h-8 text-white dark:text-neutral-300" />
</div>
<p className="text-sm font-medium">{name}</p>
</div>
@@ -99,12 +99,12 @@ export function ProductCard({
{/* Badges */}
<div className="absolute top-3 left-3 flex flex-col gap-2">
{isNew && (
- <Badge className="bg-blue-500 hover:bg-blue-600 text-white">
+ <Badge className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white shadow-lg">
New
</Badge>
)}
{isSale && (
- <Badge className="bg-red-500 hover:bg-red-600 text-white">
+ <Badge className="bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white shadow-lg">
-{discountPercentage}%
</Badge>
)}
@@ -114,11 +114,11 @@ export function ProductCard({
<Button
variant="ghost"
size="icon"
- className="absolute top-3 right-3 bg-white/80 hover:bg-white text-gray-600 hover:text-red-500 transition-colors"
+ className="absolute top-3 right-3 bg-white/90 dark:bg-neutral-900/90 hover:bg-white dark:hover:bg-neutral-900 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors shadow-lg dark:shadow-black/20"
onClick={handleWishlistToggle}
>
<Heart
- className={`h-4 w-4 ${wishlisted ? 'fill-red-500 text-red-500' : ''}`}
+ className={`h-4 w-4 ${wishlisted ? 'fill-red-500 text-red-500 dark:fill-red-400 dark:text-red-400' : ''}`}
/>
</Button>
@@ -129,7 +129,7 @@ export function ProductCard({
<button
key={index}
className={`w-2 h-2 rounded-full transition-colors ${
- index === currentImage ? 'bg-white' : 'bg-white/50'
+ index === currentImage ? 'bg-white dark:bg-neutral-300' : 'bg-white/50 dark:bg-neutral-500/50'
}`}
onClick={(e) => {
e.preventDefault();
@@ -142,7 +142,7 @@ export function ProductCard({
)}
{/* Hover overlay with actions */}
- <div className={`absolute inset-0 bg-black/20 flex items-center justify-center transition-opacity duration-300 ${
+ <div className={`absolute inset-0 bg-black/30 dark:bg-black/50 flex items-center justify-center transition-opacity duration-300 ${
isHovered ? 'opacity-100' : 'opacity-0'
}`}>
<div className="flex gap-3">
@@ -150,7 +150,7 @@ export function ProductCard({
variant="secondary"
size="sm"
onClick={handleQuickView}
- className="bg-white/90 hover:bg-white text-gray-900"
+ className="bg-white/95 dark:bg-neutral-900/95 hover:bg-white dark:hover:bg-neutral-900 text-gray-900 dark:text-white shadow-lg dark:shadow-black/20"
>
<Eye className="h-4 w-4 mr-2" />
Quick View
@@ -158,7 +158,7 @@ export function ProductCard({
<Button
size="sm"
onClick={handleAddToCart}
- className="bg-primary hover:bg-primary/90"
+ className="bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 shadow-lg dark:shadow-black/20"
>
<ShoppingBag className="h-4 w-4 mr-2" />
Add to Cart
@@ -168,14 +168,14 @@ export function ProductCard({
</div>
{/* Product Info */}
- <CardContent className="p-4 space-y-3">
+ <CardContent className="p-4 space-y-3 bg-white dark:bg-neutral-900">
{/* Category */}
- <p className="text-xs text-muted-foreground uppercase tracking-wide">
+ <p className="text-xs text-muted-foreground dark:text-neutral-500 uppercase tracking-wide">
{category}
</p>
{/* Product Name */}
- <h3 className="font-semibold text-sm leading-tight line-clamp-2 group-hover:text-primary transition-colors">
+ <h3 className="font-semibold text-sm leading-tight line-clamp-2 group-hover:text-primary dark:group-hover:text-primary transition-colors text-foreground dark:text-neutral-100">
{name}
</h3>
@@ -187,13 +187,13 @@ export function ProductCard({
key={star}
className={`h-3 w-3 ${
star <= rating
- ? 'fill-yellow-400 text-yellow-400'
- : 'text-gray-300'
+ ? 'fill-yellow-400 text-yellow-400 dark:fill-yellow-500 dark:text-yellow-500'
+ : 'text-gray-300 dark:text-neutral-600'
}`}
/>
))}
</div>
- <span className="text-xs text-muted-foreground">
+ <span className="text-xs text-muted-foreground dark:text-neutral-500">
({reviewCount})
</span>
</div>
@@ -204,12 +204,12 @@ export function ProductCard({
{colors.slice(0, 4).map((color, index) => (
<div
key={index}
- className="w-4 h-4 rounded-full border border-gray-300"
+ className="w-4 h-4 rounded-full border border-gray-300 dark:border-neutral-600"
style={{ backgroundColor: color }}
/>
))}
{colors.length > 4 && (
- <span className="text-xs text-muted-foreground ml-1">
+ <span className="text-xs text-muted-foreground dark:text-neutral-500 ml-1">
+{colors.length - 4}
</span>
)}
@@ -218,11 +218,11 @@ export function ProductCard({
{/* Price */}
<div className="flex items-center gap-2">
- <span className="font-bold text-lg">
+ <span className="font-bold text-lg text-foreground dark:text-neutral-100">
${price.toFixed(2)}
</span>
{originalPrice && (
- <span className="text-sm text-muted-foreground line-through">
+ <span className="text-sm text-muted-foreground dark:text-neutral-500 line-through">
${originalPrice.toFixed(2)}
</span>
)}
@@ -232,12 +232,12 @@ export function ProductCard({
{sizes.length > 0 && (
<div className="flex flex-wrap gap-1">
{sizes.slice(0, 4).map((size) => (
- <Badge key={size} variant="outline" className="text-xs px-2 py-1">
+ <Badge key={size} variant="outline" className="text-xs px-2 py-1 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300">
{size}
</Badge>
))}
{sizes.length > 4 && (
- <Badge variant="outline" className="text-xs px-2 py-1">
+ <Badge variant="outline" className="text-xs px-2 py-1 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300">
+{sizes.length - 4}
</Badge>
)}
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-15 23:32:25 +0000