mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 09:31:12 -05:00
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:
@@ -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>}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user