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

Refactor: Apply consistent card styling

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/parks/ParkCard.tsx
View File

@@ -74,55 +74,45 @@ export function ParkCard({ park }: ParkCardProps) {
</Badge>
</div>
<CardContent className="p-3 space-y-2">
{/* Header */}
<div className="space-y-1">
<h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
{park.name}
</h3>
{park.location && (
<div className="flex items-center gap-1 text-sm text-muted-foreground">
<MapPin className="w-3 h-3" />
<span className="truncate">
{park.location.city && `${park.location.city}, `}{park.location.country}
</span>
</div>
)}
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
{/* Header */}
<div className="space-y-0.5 min-w-0">
<h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
{park.name}
</h3>
{park.location && (
<div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
<MapPin className="w-3 h-3 flex-shrink-0" />
<span className="truncate">
{park.location.city && `${park.location.city}, `}{park.location.country}
</span>
</div>
)}
</div>
{/* Park Type */}
<Badge variant="outline" className="text-xs">
{formatParkType(park.park_type)}
</Badge>
{/* Stats */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-4">
{park.ride_count > 0 && (
<div className="flex items-center gap-1">
<span className="text-primary font-medium">{park.ride_count}</span>
<span className="text-muted-foreground">rides</span>
</div>
)}
{park.coaster_count > 0 && (
<div className="flex items-center gap-1">
<span className="text-accent font-medium">{park.coaster_count}</span>
<FerrisWheel className="w-3 h-3 text-muted-foreground" />
</div>
)}
</div>
{park.average_rating > 0 && (
{/* Stats & Rating */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-3">
{park.ride_count > 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">{park.average_rating.toFixed(1)}</span>
{park.review_count > 0 && (
<span className="text-xs text-muted-foreground">({park.review_count})</span>
)}
<FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
<span className="font-medium">{park.ride_count}</span>
<span className="text-muted-foreground">rides</span>
</div>
)}
</div>
{park.average_rating > 0 && (
<div className="inline-flex items-center gap-1">
<Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
<span className="font-semibold">{park.average_rating.toFixed(1)}</span>
{park.review_count > 0 && (
<span className="text-muted-foreground">({park.review_count})</span>
)}
</div>
)}
</div>
</CardContent>
</div>
</Card>;