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

@@ -1,5 +1,7 @@
import { useState, lazy, Suspense, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { CompanyPreviewCard } from '@/components/preview/CompanyPreviewCard';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { trackPageView } from '@/lib/viewTracking';
@@ -435,12 +437,19 @@ export default function ParkDetail() {
<Users className="w-4 h-4 text-muted-foreground" />
<div>
<div className="font-medium">Operator</div>
<Link
to={`/operators/${park.operator.slug}`}
className="text-sm text-primary hover:underline"
>
{park.operator.name}
</Link>
<HoverCard openDelay={300}>
<HoverCardTrigger asChild>
<Link
to={`/operators/${park.operator.slug}`}
className="text-sm text-primary hover:underline"
>
{park.operator.name}
</Link>
</HoverCardTrigger>
<HoverCardContent side="right" className="w-auto">
<CompanyPreviewCard slug={park.operator.slug} />
</HoverCardContent>
</HoverCard>
</div>
</div>}