pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 05:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ManufacturerCard to match Park/RideCard

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:55:29 +00:00
parent 5407763162
commit 34ed211fa3
1 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/manufacturers/ManufacturerCard.tsx
View File

@@ -38,69 +38,82 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
onClick={handleClick}
>
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<Badge variant="outline" className="text-xs">
{formatCompanyType(company.company_type)}
</Badge>
</div>
<CardTitle className="text-lg group-hover:text-primary transition-colors line-clamp-2">
{company.name}
</CardTitle>
</div>
{company.logo_url && (
<div className="w-12 h-12 bg-muted rounded-lg overflow-hidden flex-shrink-0">
{/* Logo/Image Section */}
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
{/* Company Type Badge */}
<div className="absolute top-3 right-3 z-10">
<Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
{formatCompanyType(company.company_type)}
</Badge>
</div>
{/* Logo Display */}
<div className="absolute inset-0 flex items-center justify-center">
{company.logo_url ? (
<div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
<img
src={company.logo_url}
alt={`${company.name} logo`}
className="w-full h-full object-cover"
className="w-full h-full object-contain p-2"
/>
</div>
) : (
<div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
{getCompanyIcon(company.company_type)}
</div>
)}
</div>
</CardHeader>
</div>
<CardContent className="space-y-3">
<CardContent className="p-4 space-y-3">
{/* Company Name */}
<h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
{company.name}
</h3>
{/* Description */}
{company.description && (
<p className="text-sm text-muted-foreground line-clamp-3">
<p className="text-sm text-muted-foreground line-clamp-2">
{company.description}
</p>
)}
<div className="space-y-2 text-sm">
{/* Company Info */}
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
{company.founded_year && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<span className="text-muted-foreground">Founded:</span>
<span className="font-medium">{company.founded_year}</span>
</div>
)}
{company.headquarters_location && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<MapPin className="w-3 h-3 text-muted-foreground" />
<span className="text-muted-foreground text-xs">
<span className="text-muted-foreground truncate">
{company.headquarters_location}
</span>
</div>
)}
</div>
{/* Ratings Display */}
{/* Rating */}
{company.average_rating > 0 && (
<div className="flex items-center gap-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
<span className="text-xs text-muted-foreground">({company.review_count})</span>
<span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
</div>
)}
{/* Action Button */}
{company.website_url && (
<Button
variant="outline"
size="sm"
className="w-full"
className="w-full bg-gradient-to-r from-primary/5 to-primary/10 hover:from-primary/10 hover:to-primary/20 transition-all duration-200"
onClick={(e) => {
e.stopPropagation();
window.open(company.website_url, '_blank');