mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 09:51:12 -05:00
Refactor: Optimize card density
This commit is contained in:
@@ -46,7 +46,7 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
return <Card 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}>
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Image Placeholder with Gradient */}
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
|
||||
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
|
||||
{(park.card_image_url || park.card_image_id) ? (
|
||||
<img
|
||||
src={park.card_image_url || getCloudflareImageUrl(park.card_image_id, 'card')}
|
||||
@@ -60,7 +60,7 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="opacity-50 flex items-center justify-center">
|
||||
<div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</div>
|
||||
)}
|
||||
@@ -74,10 +74,10 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<CardContent className="p-3 space-y-2">
|
||||
{/* Header */}
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
|
||||
<h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
|
||||
{park.name}
|
||||
</h3>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user