mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 06:11: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:
36
src/hooks/preview/useCompanyPreview.ts
Normal file
36
src/hooks/preview/useCompanyPreview.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { queryKeys } from '@/lib/queryKeys';
|
||||
|
||||
/**
|
||||
* Hook to fetch company preview data for hover cards
|
||||
*/
|
||||
export function useCompanyPreview(slug: string | undefined, enabled = true) {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.companies.detail(slug || ''),
|
||||
queryFn: async () => {
|
||||
if (!slug) throw new Error('Slug is required');
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('companies')
|
||||
.select(`
|
||||
id,
|
||||
name,
|
||||
slug,
|
||||
company_type,
|
||||
person_type,
|
||||
headquarters_location,
|
||||
founded_year,
|
||||
logo_url
|
||||
`)
|
||||
.eq('slug', slug)
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
},
|
||||
enabled: enabled && !!slug,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
gcTime: 15 * 60 * 1000, // 15 minutes
|
||||
});
|
||||
}
|
||||
39
src/hooks/preview/useParkPreview.ts
Normal file
39
src/hooks/preview/useParkPreview.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { queryKeys } from '@/lib/queryKeys';
|
||||
|
||||
/**
|
||||
* Hook to fetch park preview data for hover cards
|
||||
*/
|
||||
export function useParkPreview(slug: string | undefined, enabled = true) {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.parks.detail(slug || ''),
|
||||
queryFn: async () => {
|
||||
if (!slug) throw new Error('Slug is required');
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('parks')
|
||||
.select(`
|
||||
id,
|
||||
name,
|
||||
slug,
|
||||
park_type,
|
||||
status,
|
||||
card_image_url,
|
||||
ride_count,
|
||||
coaster_count,
|
||||
average_rating,
|
||||
review_count,
|
||||
location:locations(city, state_province, country)
|
||||
`)
|
||||
.eq('slug', slug)
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
},
|
||||
enabled: enabled && !!slug,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
gcTime: 15 * 60 * 1000, // 15 minutes
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user