pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-25 20:51:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add hover preview cards

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/ParkDetail.tsx
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>}

59
src/pages/RideDetail.tsx
View File

@@ -1,5 +1,8 @@
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 { ParkPreviewCard } from '@/components/preview/ParkPreviewCard';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { trackPageView } from '@/lib/viewTracking';
@@ -255,10 +258,20 @@ export default function RideDetail() {
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
{ride.name}
</h1>
<div className="flex items-center text-white/90 text-lg">
<MapPin className="w-5 h-5 mr-2" />
{ride.park.name}
</div>
<HoverCard openDelay={300}>
<HoverCardTrigger asChild>
<Link
to={`/parks/${ride.park.slug}`}
className="flex items-center text-white/90 text-lg hover:text-white transition-colors"
>
<MapPin className="w-5 h-5 mr-2" />
<span className="hover:underline">{ride.park.name}</span>
</Link>
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" className="w-auto">
<ParkPreviewCard slug={ride.park.slug} />
</HoverCardContent>
</HoverCard>
<div className="mt-3">
<VersionIndicator
entityType="ride"
@@ -471,12 +484,19 @@ export default function RideDetail() {
<Users className="w-4 h-4 text-muted-foreground" />
<div>
<div className="font-medium">Manufacturer</div>
<Link
to={`/manufacturers/${ride.manufacturer.slug}`}
className="text-sm text-primary hover:underline"
>
{ride.manufacturer.name}
</Link>
<HoverCard openDelay={300}>
<HoverCardTrigger asChild>
<Link
to={`/manufacturers/${ride.manufacturer.slug}`}
className="text-sm text-primary hover:underline"
>
{ride.manufacturer.name}
</Link>
</HoverCardTrigger>
<HoverCardContent side="right" className="w-auto">
<CompanyPreviewCard slug={ride.manufacturer.slug} />
</HoverCardContent>
</HoverCard>
</div>
</div>
)}
@@ -486,12 +506,19 @@ export default function RideDetail() {
<Users className="w-4 h-4 text-muted-foreground" />
<div>
<div className="font-medium">Designer</div>
<Link
to={`/designers/${ride.designer.slug}`}
className="text-sm text-primary hover:underline"
>
{ride.designer.name}
</Link>
<HoverCard openDelay={300}>
<HoverCardTrigger asChild>
<Link
to={`/designers/${ride.designer.slug}`}
className="text-sm text-primary hover:underline"
>
{ride.designer.name}
</Link>
</HoverCardTrigger>
<HoverCardContent side="right" className="w-auto">
<CompanyPreviewCard slug={ride.designer.slug} />
</HoverCardContent>
</HoverCard>
</div>
</div>
)}