Refactor: Optimize card density

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 22:22:24 +00:00
parent fc53015448
commit ebd0f0fd56
7 changed files with 33 additions and 33 deletions

View File

@@ -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>