Spaces:
Running
Running
File size: 3,775 Bytes
b89a86e |
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { Link } from "wouter";
import { Store } from "@/types";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MapPin } from "lucide-react";
interface StoreCardProps {
store: Store;
}
export default function StoreCard({ store }: StoreCardProps) {
return (
<Link href={`/store/${store.id}`}>
<Card className="group cursor-pointer glass-card border-0 hover:scale-105 transition-all duration-300" data-testid={`store-card-${store.id}`}>
{/* Store Banner */}
<div className="relative h-32 bg-gradient-to-r from-primary via-secondary to-primary rounded-t-2xl overflow-hidden">
{store.bannerImage ? (
<img
src={store.bannerImage}
alt={`${store.name} banner`}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
data-testid={`store-banner-${store.id}`}
/>
) : (
<div className="absolute inset-0 bg-gradient-to-r from-primary via-secondary to-primary" />
)}
<div className="absolute inset-0 bg-black/20" />
</div>
<CardContent className="p-4">
<div className="flex items-center space-x-4">
{/* Store Face Image */}
<div className="w-16 h-16 rounded-full overflow-hidden bg-muted flex-shrink-0 -mt-8 border-4 border-white shadow-lg">
{store.faceImage ? (
<img
src={store.faceImage}
alt={`${store.name} profile`}
className="w-full h-full object-cover"
data-testid={`store-face-${store.id}`}
/>
) : (
<div className="w-full h-full bg-muted flex items-center justify-center">
<span className="text-muted-foreground text-xs">No Image</span>
</div>
)}
</div>
<div className="flex-1 pt-2">
<h3 className="font-semibold text-foreground mb-1" data-testid={`store-name-${store.id}`}>
{store.name}
</h3>
{/* Seller name */}
<p className="text-xs text-muted-foreground mb-2" data-testid={`seller-name-${store.id}`}>
By: {store.seller?.username || 'Store Owner'}
</p>
{/* Store Rating */}
<div className="flex items-center mb-2">
<div className="flex text-yellow-400 text-sm">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-3 w-3 fill-current" />
))}
</div>
<span className="text-xs text-muted-foreground ml-2" data-testid={`store-rating-${store.id}`}>
(4.9/5)
</span>
</div>
{/* Store Description */}
{store.description && (
<p className="text-sm text-muted-foreground line-clamp-2 mb-2" data-testid={`store-description-${store.id}`}>
{store.description}
</p>
)}
{/* Store Info */}
<div className="flex items-center justify-between">
<div className="flex items-center text-xs text-muted-foreground">
<MapPin className="h-3 w-3 mr-1" />
<span>Verified • Bharat</span>
</div>
<Badge variant="secondary" className="text-xs" data-testid={`store-status-${store.id}`}>
Active
</Badge>
</div>
</div>
</div>
</CardContent>
</Card>
</Link>
);
}
|