Add hover preview cards

Adds hover-preview UX by introducing preview cards for entities and wiring hoverable links:
- Implements CompanyPreviewCard and ParkPreviewCard components plus hooks to fetch preview data
- Adds HoverCard usage to ParkDetail and RideDetail for operator, manufacturer, and designer links
- Creates preview wrappers for manufacturer/designer/operator links and updates related pages to use hover previews
- Includes supporting updates to query keys and preview hooks to fetch minimal data for previews
This commit is contained in:
gpt-engineer-app[bot]
2025-11-12 03:44:01 +00:00
parent 2ccfe8c48a
commit 361231bfac
8 changed files with 345 additions and 28 deletions

View File

@@ -5,6 +5,8 @@ import { Button } from '@/components/ui/button';
import { Ride } from '@/types/database';
import { cn } from '@/lib/utils';
import { Link } from 'react-router-dom';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { CompanyPreviewCard } from '@/components/preview/CompanyPreviewCard';
interface RideListViewProps {
rides: Ride[];
@@ -116,12 +118,19 @@ export function RideListView({ rides, onRideClick }: RideListViewProps) {
{formatCategory(ride.category)}
</Badge>
{ride.manufacturer && (
<Link to={`/manufacturers/${ride.manufacturer.slug}`}>
<Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300 hover:bg-accent/10">
<Factory className="w-3 h-3 mr-1" />
{ride.manufacturer.name}
</Badge>
</Link>
<HoverCard openDelay={300}>
<HoverCardTrigger asChild>
<Link to={`/manufacturers/${ride.manufacturer.slug}`}>
<Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300 hover:bg-accent/10 cursor-pointer">
<Factory className="w-3 h-3 mr-1" />
{ride.manufacturer.name}
</Badge>
</Link>
</HoverCardTrigger>
<HoverCardContent side="top" className="w-auto">
<CompanyPreviewCard slug={ride.manufacturer.slug} />
</HoverCardContent>
</HoverCard>
)}
</div>
</div>