mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 02:11:14 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
104
src-old/components/rides/RideModelCard.tsx
Normal file
104
src-old/components/rides/RideModelCard.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { FerrisWheel } from 'lucide-react';
|
||||
import { RideModel } from '@/types/database';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
|
||||
|
||||
interface RideModelCardProps {
|
||||
model: RideModel;
|
||||
manufacturerSlug: string;
|
||||
}
|
||||
|
||||
export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const formatCategory = (category: string | null | undefined) => {
|
||||
if (!category) return 'Unknown';
|
||||
return category.split('_').map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
).join(' ');
|
||||
};
|
||||
|
||||
const formatRideType = (type: string | null | undefined) => {
|
||||
if (!type) return 'Unknown';
|
||||
return type.split('_').map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
).join(' ');
|
||||
};
|
||||
|
||||
// Safely extract ride count and image data
|
||||
const extendedModel = model as RideModel & {
|
||||
ride_count?: number;
|
||||
card_image_url?: string;
|
||||
card_image_id?: string;
|
||||
};
|
||||
|
||||
const rideCount = extendedModel.ride_count || 0;
|
||||
const cardImageUrl = extendedModel.card_image_url;
|
||||
const cardImageId = extendedModel.card_image_id;
|
||||
|
||||
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={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
|
||||
>
|
||||
<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 ? `
|
||||
${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
|
||||
${getCloudflareImageUrl(cardImageId, 'card')} 1200w
|
||||
` : undefined}
|
||||
sizes="(max-width: 640px) 600px, 1200px"
|
||||
alt={model.name}
|
||||
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">
|
||||
<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-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>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
{model.category && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{formatCategory(model.category)}
|
||||
</Badge>
|
||||
)}
|
||||
{model.ride_type && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{formatRideType(model.ride_type)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rideCount > 0 && (
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
|
||||
<span className="font-medium">{rideCount}</span>
|
||||
<span className="text-muted-foreground">installations</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user