mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 12:11:17 -05:00
Refactor: Standardize card component styles
This commit is contained in:
gpt-engineer-app[bot]
@@ -32,24 +32,32 @@ export function BlogPostCard({
|
||||
|
||||
return (
|
||||
<Link to={`/blog/${slug}`}>
|
||||
<Card className="overflow-hidden hover:scale-[1.02] hover:shadow-xl transition-all duration-300 group">
|
||||
<div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/20 to-secondary/20">
|
||||
<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 hover:border-primary/30 transition-all duration-300 hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300">
|
||||
<div className="aspect-[3/2] overflow-hidden bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative">
|
||||
{featuredImageId ? (
|
||||
<>
|
||||
<img
|
||||
src={getCloudflareImageUrl(featuredImageId, 'public')}
|
||||
alt={title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<span className="text-6xl opacity-20">📝</span>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
<span className="text-4xl opacity-80">📝</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-3">
|
||||
<h3 className="text-xl font-bold line-clamp-2 group-hover:text-primary transition-colors">
|
||||
<div className="p-3 space-y-2 border-t border-border/30">
|
||||
<h3 className="text-base font-bold line-clamp-2 group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
|
||||
@@ -22,13 +22,13 @@ export function DesignerCard({ company }: DesignerCardProps) {
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="group cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-[1.02] bg-card border border-border overflow-hidden"
|
||||
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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
|
||||
onClick={handleClick}
|
||||
>
|
||||
{/* Header Image/Logo Section */}
|
||||
<div className="relative aspect-[3/2] bg-gradient-to-br from-background to-muted/50 flex items-center justify-center border-b border-border">
|
||||
<div className="relative aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center overflow-hidden">
|
||||
{/* Background Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
|
||||
{/* Company Type Badge */}
|
||||
<div className="absolute top-3 right-3">
|
||||
@@ -49,8 +49,11 @@ export function DesignerCard({ company }: DesignerCardProps) {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-12 h-12 text-muted-foreground/30">
|
||||
<Ruler className="w-5 h-5" />
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
<Ruler className="w-8 h-8 text-primary/70" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -59,7 +62,7 @@ export function DesignerCard({ company }: DesignerCardProps) {
|
||||
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
|
||||
{/* Company Name */}
|
||||
<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">
|
||||
<h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{company.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -56,19 +56,20 @@ export function RecentChangeCard({
|
||||
|
||||
return (
|
||||
<Link to={getEntityPath()}>
|
||||
<Card className="overflow-hidden hover:shadow-lg transition-shadow h-full">
|
||||
<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 hover:border-primary/30 transition-all duration-300 hover:scale-[1.02] h-full relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300">
|
||||
{imageUrl && (
|
||||
<div className="aspect-video w-full overflow-hidden bg-muted">
|
||||
<div className="aspect-[3/2] w-full overflow-hidden bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={entityName}
|
||||
className="w-full h-full object-cover"
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="p-2.5 space-y-1.5 border-t border-border/30">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className={entityTypeColors[entityType]}>
|
||||
@@ -78,7 +79,7 @@ export function RecentChangeCard({
|
||||
{changeType}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="font-semibold line-clamp-2 text-sm">{entityName}</h3>
|
||||
<h3 className="font-bold line-clamp-2 text-sm group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">{entityName}</h3>
|
||||
</div>
|
||||
|
||||
{changeReason && (
|
||||
|
||||
@@ -36,7 +36,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 cursor-pointer active:scale-[0.98] md:hover:scale-[1.02]"
|
||||
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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
|
||||
onClick={handleClick}
|
||||
>
|
||||
{/* Logo/Image Section */}
|
||||
@@ -76,9 +76,14 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-12 h-12 text-muted-foreground/30">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
<div className="w-8 h-8 text-primary/70">
|
||||
{getCompanyIcon(company.company_type)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
@@ -88,7 +93,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
|
||||
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
|
||||
{/* Company Name */}
|
||||
<div className="space-y-0.5 min-w-0">
|
||||
<h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2 break-words">
|
||||
<h3 className="text-base font-bold group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{company.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { UserAvatar } from '@/components/ui/user-avatar';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
@@ -17,13 +17,26 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operating':
|
||||
return 'bg-green-500/20 text-green-400 border-green-500/30';
|
||||
return 'bg-green-500/50 text-green-200 border-green-500/50';
|
||||
case 'seasonal':
|
||||
return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
|
||||
return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
|
||||
case 'under_construction':
|
||||
return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
||||
return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
|
||||
default:
|
||||
return 'bg-red-500/20 text-red-400 border-red-500/30';
|
||||
return 'bg-red-500/50 text-red-200 border-red-500/50';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operating':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
case 'seasonal':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
case 'under_construction':
|
||||
return <Clock className="w-3 h-3" />;
|
||||
default:
|
||||
return <Clock className="w-3 h-3" />;
|
||||
}
|
||||
};
|
||||
const getParkTypeIcon = (type: string) => {
|
||||
@@ -43,7 +56,7 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
const formatParkType = (type: string) => {
|
||||
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
};
|
||||
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}>
|
||||
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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300" onClick={handleClick}>
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Image Placeholder with Gradient */}
|
||||
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
|
||||
@@ -60,24 +73,28 @@ export function ParkCard({ park }: ParkCardProps) {
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent group-hover:scale-110 transition-transform duration-500" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
|
||||
{/* Status Badge */}
|
||||
<Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}>
|
||||
{park.status.replace('_', ' ').toUpperCase()}
|
||||
<Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}>
|
||||
{getStatusIcon(park.status)}
|
||||
<span>{park.status.replace('_', ' ').toUpperCase()}</span>
|
||||
</Badge>
|
||||
</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">
|
||||
<h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{park.name}
|
||||
</h3>
|
||||
|
||||
|
||||
@@ -40,13 +40,12 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group"
|
||||
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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
|
||||
onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
|
||||
>
|
||||
<div
|
||||
className="aspect-[3/2] bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
|
||||
>
|
||||
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative overflow-hidden">
|
||||
{(cardImageUrl || cardImageId) ? (
|
||||
<>
|
||||
<img
|
||||
src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
|
||||
srcSet={cardImageId ? `
|
||||
@@ -55,19 +54,26 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
|
||||
` : undefined}
|
||||
sizes="(max-width: 640px) 600px, 1200px"
|
||||
alt={model.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<FerrisWheel className="w-12 h-12 text-muted-foreground/30" />
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
|
||||
<div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
|
||||
<FerrisWheel className="w-8 h-8 text-primary/70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
|
||||
<div className="space-y-0.5 min-w-0">
|
||||
<h3 className="font-semibold text-base line-clamp-2 break-words group-hover:text-primary transition-colors">
|
||||
<h3 className="font-bold text-base line-clamp-2 break-words group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
|
||||
{model.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user