Refactor: Apply consistent card styling

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:45:58 +00:00
parent cce478ae32
commit d195456a29
6 changed files with 118 additions and 114 deletions

View File

@@ -56,14 +56,16 @@ export function DesignerCard({ company }: DesignerCardProps) {
</div>
</div>
<CardContent className="p-3 space-y-2">
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
{/* Company Name */}
<h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2">
{company.name}
</h3>
<div className="space-y-0.5 min-w-0">
<h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
{company.name}
</h3>
</div>
{/* Company Details */}
<div className="space-y-2 text-sm">
<div className="space-y-1 text-sm">
{/* Founded Year */}
{company.founded_year && (
<div className="flex items-center gap-2">
@@ -74,8 +76,8 @@ export function DesignerCard({ company }: DesignerCardProps) {
{/* Location */}
{company.headquarters_location && (
<div className="flex items-center gap-1">
<MapPin className="w-3 h-3 flex-shrink-0" />
<div className="flex items-center gap-1 min-w-0">
<MapPin className="w-3 h-3 flex-shrink-0 text-muted-foreground" />
<span className="text-muted-foreground truncate">{company.headquarters_location}</span>
</div>
)}
@@ -83,10 +85,10 @@ export function DesignerCard({ company }: DesignerCardProps) {
{/* Stats Display */}
<div className="flex items-center justify-between text-sm">
<div className="flex flex-wrap gap-x-4 gap-y-1">
<div className="flex flex-wrap gap-3 gap-y-1">
{company.ride_count && company.ride_count > 0 && (
<div className="flex items-center gap-1">
<FerrisWheel className="w-3 h-3 text-muted-foreground" />
<FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
<span className="font-medium">{company.ride_count}</span>
<span className="text-muted-foreground">designs</span>
</div>
@@ -94,7 +96,6 @@ export function DesignerCard({ company }: DesignerCardProps) {
{company.coaster_count && company.coaster_count > 0 && (
<div className="flex items-center gap-1">
<span className="text-muted-foreground"></span>
<span className="font-medium">{company.coaster_count}</span>
<span className="text-muted-foreground">coasters</span>
</div>
@@ -102,7 +103,6 @@ export function DesignerCard({ company }: DesignerCardProps) {
{company.model_count && company.model_count > 0 && (
<div className="flex items-center gap-1">
<span className="text-muted-foreground"></span>
<span className="font-medium">{company.model_count}</span>
<span className="text-muted-foreground">concepts</span>
</div>
@@ -110,11 +110,11 @@ export function DesignerCard({ company }: DesignerCardProps) {
</div>
{company.average_rating > 0 && (
<div className="flex items-center gap-1">
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
<span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
<div className="inline-flex items-center gap-1">
<Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
<span className="font-semibold">{company.average_rating.toFixed(1)}</span>
{company.review_count > 0 && (
<span className="text-xs text-muted-foreground">({company.review_count})</span>
<span className="text-muted-foreground">({company.review_count})</span>
)}
</div>
)}