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

Refactor: Replace emojis with Lucide React icons

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 12:36:38 +00:00
parent bb139bd70c
commit d1f32dbf25
14 changed files with 136 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/homepage/ContentTabs.tsx
View File

@@ -4,7 +4,7 @@ import { ParkCard } from '@/components/parks/ParkCard';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Star, TrendingUp, Plus, MapPin, Clock, Zap } from 'lucide-react';
import { Star, TrendingUp, Plus, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { Park, Ride } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
@@ -81,13 +81,13 @@ export function ContentTabs() {
const getRideIcon = (category: string) => {
switch (category) {
case 'roller_coaster': return '🎢';
case 'water_ride': return '🌊';
case 'dark_ride': return '🎭';
case 'flat_ride': return '🎡';
case 'kiddie_ride': return '🎠';
case 'transportation': return '🚂';
default: return '🎢';
case 'roller_coaster': return <FerrisWheel className="w-6 h-6" />;
case 'water_ride': return <Waves className="w-6 h-6" />;
case 'dark_ride': return <Theater className="w-6 h-6" />;
case 'flat_ride': return <FerrisWheel className="w-6 h-6" />;
case 'kiddie_ride': return <FerrisWheel className="w-6 h-6" />;
case 'transportation': return <Train className="w-6 h-6" />;
default: return <FerrisWheel className="w-6 h-6" />;
}
};
@@ -120,7 +120,7 @@ export function ContentTabs() {
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
) : (
<div className="text-6xl opacity-50">
<div className="opacity-50 flex items-center justify-center">
{getRideIcon(ride.category)}
</div>
)}
@@ -143,7 +143,7 @@ export function ContentTabs() {
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
{ride.name}
</h3>
<span className="text-xl">{getRideIcon(ride.category)}</span>
<span className="flex items-center">{getRideIcon(ride.category)}</span>
</div>
{ride.park?.name && (

15
src/components/homepage/FeaturedParks.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Star, TrendingUp, Award } from 'lucide-react';
import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@@ -53,10 +53,10 @@ export function FeaturedParks() {
<div className="relative">
{/* Gradient Background */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
<div className="text-6xl opacity-50">
{park.park_type === 'theme_park' ? '🏰' :
park.park_type === 'amusement_park' ? '🎢' :
park.park_type === 'water_park' ? '🏊' : '🎪'}
<div className="opacity-50">
{park.park_type === 'theme_park' ? <Castle className="w-16 h-16" /> :
park.park_type === 'amusement_park' ? <FerrisWheel className="w-16 h-16" /> :
park.park_type === 'water_park' ? <Waves className="w-16 h-16" /> : <Tent className="w-16 h-16" />}
</div>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
@@ -88,7 +88,10 @@ export function FeaturedParks() {
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-3">
<span className="text-primary font-medium">{park.ride_count} rides</span>
<span className="text-accent font-medium">{park.coaster_count} 🎢</span>
<div className="flex items-center gap-1">
<span className="text-accent font-medium">{park.coaster_count}</span>
<FerrisWheel className="w-3 h-3 text-accent" />
</div>
</div>
<div className="text-xs text-muted-foreground">
{park.review_count} reviews

14
src/components/layout/Header.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield } from 'lucide-react';
import { Search, Menu, Zap, MapPin, Star, ChevronDown, Building, Users, Crown, Palette, Shield, FerrisWheel, Factory } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
@@ -40,10 +40,12 @@ export function Header() {
Parks
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigate('/rides')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
🎢 <span className="ml-2">Rides</span>
<FerrisWheel className="w-4 h-4 mr-2" />
Rides
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
🏭 <span className="ml-2">Manufacturers</span>
<Factory className="w-4 h-4 mr-2" />
Manufacturers
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigate('/operators')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
<Building className="w-4 h-4 mr-2" />
@@ -96,10 +98,12 @@ export function Header() {
Parks
</Button>
<Button variant="ghost" className="justify-start" onClick={() => navigate('/rides')}>
🎢 Rides
<FerrisWheel className="w-4 h-4 mr-2" />
Rides
</Button>
<Button variant="ghost" className="justify-start" onClick={() => navigate('/manufacturers')}>
🏭 Manufacturers
<Factory className="w-4 h-4 mr-2" />
Manufacturers
</Button>
<Button variant="ghost" className="justify-start" onClick={() => navigate('/operators')}>
<Building className="w-4 h-4 mr-2" />

18
src/components/parks/ParkCard.tsx
View File

@@ -1,4 +1,4 @@
import { MapPin, Star, Users, Clock } from 'lucide-react';
import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
const getParkTypeIcon = (type: string) => {
switch (type) {
case 'theme_park': return '🏰';
case 'amusement_park': return '🎢';
case 'water_park': return '🏊';
case 'family_entertainment': return '🎪';
default: return '🎡';
case 'theme_park': return <Castle className="w-5 h-5" />;
case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
case 'water_park': return <Waves className="w-5 h-5" />;
case 'family_entertainment': return <Tent className="w-5 h-5" />;
default: return <FerrisWheel className="w-5 h-5" />;
}
};
@@ -50,7 +50,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
) : (
<div className="text-6xl opacity-50">
<div className="opacity-50 flex items-center justify-center">
{getParkTypeIcon(park.park_type)}
</div>
)}
@@ -73,7 +73,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
{park.name}
</h3>
<span className="text-xl">{getParkTypeIcon(park.park_type)}</span>
{getParkTypeIcon(park.park_type)}
</div>
{park.location && (
@@ -105,7 +105,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
</div>
<div className="flex items-center gap-1">
<span className="text-accent font-medium">{park.coaster_count}</span>
<span className="text-muted-foreground">🎢</span>
<FerrisWheel className="w-3 h-3 text-muted-foreground" />
</div>
</div>

4
src/components/parks/ParkGrid.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Search, Filter, MapPin, SlidersHorizontal } from 'lucide-react';
import { Search, Filter, MapPin, SlidersHorizontal, FerrisWheel } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -240,7 +240,7 @@ export function ParkGrid() {
{/* Parks Grid */}
{filteredParks.length === 0 ? (
<div className="text-center py-12">
<div className="text-6xl mb-4 opacity-50">🎢</div>
<FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No parks found</h3>
<p className="text-muted-foreground mb-4">
Try adjusting your search terms or filters

18
src/components/parks/ParkListView.tsx
View File

@@ -1,4 +1,4 @@
import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
const getParkTypeIcon = (type: string) => {
switch (type) {
case 'theme_park': return '🏰';
case 'amusement_park': return '🎢';
case 'water_park': return '🏊';
case 'family_entertainment': return '🎪';
default: return '🎡';
case 'theme_park': return <Castle className="w-5 h-5" />;
case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
case 'water_park': return <Waves className="w-5 h-5" />;
case 'family_entertainment': return <Tent className="w-5 h-5" />;
default: return <FerrisWheel className="w-5 h-5" />;
}
};
@@ -55,7 +55,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
/>
) : (
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
<span className="text-3xl opacity-50">
<span className="opacity-50">
{getParkTypeIcon(park.park_type)}
</span>
</div>
@@ -79,7 +79,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
{park.name}
</h3>
<span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
{getParkTypeIcon(park.park_type)}
</div>
{park.location && (
@@ -132,7 +132,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
</div>
<div className="flex items-center gap-1">
<span className="text-accent font-medium">{park.coaster_count || 0}</span>
<span className="text-muted-foreground">🎢</span>
<FerrisWheel className="w-3 h-3 text-muted-foreground" />
</div>
{park.review_count > 0 && (
<div className="flex items-center gap-1">

12
src/components/search/AutocompleteSearch.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useEffect, useState } from 'react';
import { Search, X, Clock, Zap } from 'lucide-react';
import { Search, X, Clock, Zap, Castle, FerrisWheel, Factory } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -161,13 +161,13 @@ export function AutocompleteSearch({
const getResultIcon = (result: SearchResult) => {
switch (result.type) {
case 'park':
return '🏰';
return <Castle className="w-5 h-5" />;
case 'ride':
return '🎢';
return <FerrisWheel className="w-5 h-5" />;
case 'company':
return '🏭';
return <Factory className="w-5 h-5" />;
default:
return '🔍';
return <Search className="w-5 h-5" />;
}
};
@@ -260,7 +260,7 @@ export function AutocompleteSearch({
</>
) : (
<>
<div className="text-2xl">{getResultIcon(item as SearchResult)}</div>
<div className="flex items-center justify-center">{getResultIcon(item as SearchResult)}</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium truncate">{item.title}</span>

22
src/components/search/SearchResults.tsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { MapPin, Star, Search as SearchIcon } from 'lucide-react';
import { MapPin, Star, Search as SearchIcon, Castle, FerrisWheel, Waves, Theater, Factory } from 'lucide-react';
import { Park, Ride, Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { useNavigate } from 'react-router-dom';
@@ -95,21 +95,21 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
case 'park':
const park = result.data as Park;
switch (park.park_type) {
case 'theme_park': return '🏰';
case 'amusement_park': return '🎢';
case 'water_park': return '🏊';
default: return '🎡';
case 'theme_park': return <Castle className="w-5 h-5" />;
case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
case 'water_park': return <Waves className="w-5 h-5" />;
default: return <FerrisWheel className="w-5 h-5" />;
}
case 'ride':
const ride = result.data as Ride;
switch (ride.category) {
case 'roller_coaster': return '🎢';
case 'water_ride': return '🌊';
case 'dark_ride': return '🎭';
default: return '🎡';
case 'roller_coaster': return <FerrisWheel className="w-5 h-5" />;
case 'water_ride': return <Waves className="w-5 h-5" />;
case 'dark_ride': return <Theater className="w-5 h-5" />;
default: return <FerrisWheel className="w-5 h-5" />;
}
case 'company':
return '🏭';
return <Factory className="w-5 h-5" />;
}
};
@@ -189,7 +189,7 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
>
<CardContent className="p-3">
<div className="flex items-center gap-3">
<div className="text-2xl">{getResultIcon(result)}</div>
<div className="flex items-center justify-center">{getResultIcon(result)}</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h4 className="font-medium text-sm truncate">

18
src/pages/Manufacturers.tsx
View File

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Search, Filter, SlidersHorizontal, Globe, MapPin } from 'lucide-react';
import { Search, Filter, SlidersHorizontal, Globe, MapPin, Factory, FerrisWheel, Ruler, Hammer, Building2 } from 'lucide-react';
import { Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { useNavigate } from 'react-router-dom';
@@ -59,11 +59,11 @@ export default function Manufacturers() {
const getCompanyIcon = (type: string) => {
switch (type) {
case 'manufacturer': return '🏭';
case 'operator': return '🎡';
case 'designer': return '📐';
case 'contractor': return '🔨';
default: return '🏢';
case 'manufacturer': return <Factory className="w-5 h-5" />;
case 'operator': return <FerrisWheel className="w-5 h-5" />;
case 'designer': return <Ruler className="w-5 h-5" />;
case 'contractor': return <Hammer className="w-5 h-5" />;
default: return <Building2 className="w-5 h-5" />;
}
};
@@ -107,7 +107,7 @@ export default function Manufacturers() {
{/* Page Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<div className="text-4xl">🏭</div>
<Factory className="w-10 h-10 text-primary" />
<h1 className="text-4xl font-bold">Manufacturers & Companies</h1>
</div>
<p className="text-lg text-muted-foreground">
@@ -172,7 +172,7 @@ export default function Manufacturers() {
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<span className="text-2xl">{getCompanyIcon(company.company_type)}</span>
<span className="flex items-center">{getCompanyIcon(company.company_type)}</span>
<Badge variant="outline" className="text-xs">
{formatCompanyType(company.company_type)}
</Badge>
@@ -238,7 +238,7 @@ export default function Manufacturers() {
</div>
) : (
<div className="text-center py-12">
<div className="text-6xl mb-4">🏭</div>
<Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
<h3 className="text-xl font-semibold mb-2">No companies found</h3>
<p className="text-muted-foreground">
Try adjusting your search criteria or filters

40
src/pages/ParkDetail.tsx
View File

@@ -16,7 +16,13 @@ import {
ArrowLeft,
Users,
Zap,
Camera
Camera,
Castle,
FerrisWheel,
Waves,
Tent,
Theater,
Train
} from 'lucide-react';
import { ReviewsSection } from '@/components/reviews/ReviewsSection';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -80,11 +86,11 @@ export default function ParkDetail() {
const getParkTypeIcon = (type: string) => {
switch (type) {
case 'theme_park': return '🏰';
case 'amusement_park': return '🎢';
case 'water_park': return '🏊';
case 'family_entertainment': return '🎪';
default: return '🎡';
case 'theme_park': return <Castle className="w-20 h-20" />;
case 'amusement_park': return <FerrisWheel className="w-20 h-20" />;
case 'water_park': return <Waves className="w-20 h-20" />;
case 'family_entertainment': return <Tent className="w-20 h-20" />;
default: return <FerrisWheel className="w-20 h-20" />;
}
};
@@ -96,13 +102,13 @@ export default function ParkDetail() {
const getRideIcon = (category: string) => {
switch (category) {
case 'roller_coaster': return '🎢';
case 'water_ride': return '🌊';
case 'dark_ride': return '🎭';
case 'flat_ride': return '🎡';
case 'kiddie_ride': return '🎠';
case 'transportation': return '🚂';
default: return '🎢';
case 'roller_coaster': return <FerrisWheel className="w-5 h-5" />;
case 'water_ride': return <Waves className="w-5 h-5" />;
case 'dark_ride': return <Theater className="w-5 h-5" />;
case 'flat_ride': return <FerrisWheel className="w-5 h-5" />;
case 'kiddie_ride': return <FerrisWheel className="w-5 h-5" />;
case 'transportation': return <Train className="w-5 h-5" />;
default: return <FerrisWheel className="w-5 h-5" />;
}
};
@@ -167,7 +173,7 @@ export default function ParkDetail() {
/>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-8xl opacity-50">
<div className="opacity-50">
{getParkTypeIcon(park.park_type)}
</div>
</div>
@@ -235,7 +241,7 @@ export default function ParkDetail() {
</Card>
<Card>
<CardContent className="p-4 text-center">
<div className="text-2xl font-bold">{getParkTypeIcon(park.park_type)}</div>
<div className="flex items-center justify-center mb-2">{getParkTypeIcon(park.park_type)}</div>
<div className="text-sm text-muted-foreground">{formatParkType(park.park_type)}</div>
</CardContent>
</Card>
@@ -280,7 +286,7 @@ export default function ParkDetail() {
className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
>
<div className="text-2xl">{getRideIcon(ride.category)}</div>
<div className="flex items-center">{getRideIcon(ride.category)}</div>
<div className="flex-1">
<h4 className="font-medium">{ride.name}</h4>
<p className="text-sm text-muted-foreground">
@@ -388,7 +394,7 @@ export default function ParkDetail() {
>
<CardContent className="p-4">
<div className="flex items-start gap-3 mb-3">
<div className="text-2xl">{getRideIcon(ride.category)}</div>
<div className="flex items-center">{getRideIcon(ride.category)}</div>
<div className="flex-1">
<h3 className="font-medium">{ride.name}</h3>
<p className="text-sm text-muted-foreground">

5
src/pages/Parks.tsx
View File

@@ -14,7 +14,8 @@ import {
Search,
ChevronDown,
Sliders,
X
X,
FerrisWheel
} from 'lucide-react';
import { Park } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
@@ -364,7 +365,7 @@ export default function Parks() {
</div>
) : (
<div className="text-center py-12">
<div className="text-6xl mb-4 opacity-50">🎢</div>
<FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No parks found</h3>
<p className="text-muted-foreground mb-4">
Try adjusting your search terms or filters

28
src/pages/RideDetail.tsx
View File

@@ -19,7 +19,11 @@ import {
Camera,
Heart,
RotateCcw,
AlertTriangle
AlertTriangle,
FerrisWheel,
Waves,
Theater,
Train
} from 'lucide-react';
import { ReviewsSection } from '@/components/reviews/ReviewsSection';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
@@ -82,13 +86,13 @@ export default function RideDetail() {
const getRideIcon = (category: string) => {
switch (category) {
case 'roller_coaster': return '🎢';
case 'water_ride': return '🌊';
case 'dark_ride': return '🎭';
case 'flat_ride': return '🎡';
case 'kiddie_ride': return '🎠';
case 'transportation': return '🚂';
default: return '🎢';
case 'roller_coaster': return <FerrisWheel className="w-20 h-20" />;
case 'water_ride': return <Waves className="w-20 h-20" />;
case 'dark_ride': return <Theater className="w-20 h-20" />;
case 'flat_ride': return <FerrisWheel className="w-20 h-20" />;
case 'kiddie_ride': return <FerrisWheel className="w-20 h-20" />;
case 'transportation': return <Train className="w-20 h-20" />;
default: return <FerrisWheel className="w-20 h-20" />;
}
};
@@ -159,7 +163,7 @@ export default function RideDetail() {
/>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-8xl opacity-50">
<div className="opacity-50">
{getRideIcon(ride.category)}
</div>
</div>
@@ -273,7 +277,7 @@ export default function RideDetail() {
{ride.drop_height_meters && (
<Card>
<CardContent className="p-4 text-center">
<div className="text-2xl mb-2">⬇️</div>
<TrendingDown className="w-6 h-6 mx-auto mb-2 text-destructive" />
<div className="text-2xl font-bold text-destructive">
<MeasurementDisplay value={ride.drop_height_meters} type="distance" />
</div>
@@ -285,7 +289,7 @@ export default function RideDetail() {
{ride.max_g_force && (
<Card>
<CardContent className="p-4 text-center">
<div className="text-2xl mb-2">⚡</div>
<Zap className="w-6 h-6 mx-auto mb-2 text-warning" />
<div className="text-2xl font-bold text-warning">{ride.max_g_force}g</div>
<div className="text-sm text-muted-foreground">max G-force</div>
</CardContent>
@@ -352,7 +356,7 @@ export default function RideDetail() {
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center gap-3">
<div className="text-2xl">{getRideIcon(ride.category)}</div>
<div className="flex items-center">{getRideIcon(ride.category)}</div>
<div>
<div className="font-medium">Category</div>
<div className="text-sm text-muted-foreground">

24
src/pages/Rides.tsx
View File

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Filter, SlidersHorizontal, Zap, Clock, Star } from 'lucide-react';
import { Filter, SlidersHorizontal, Zap, Clock, Star, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { Ride } from '@/types/database';
@@ -77,13 +77,13 @@ export default function Rides() {
const getRideIcon = (category: string) => {
switch (category) {
case 'roller_coaster': return '🎢';
case 'water_ride': return '🌊';
case 'dark_ride': return '🎭';
case 'flat_ride': return '🎡';
case 'kiddie_ride': return '🎠';
case 'transportation': return '🚂';
default: return '🎢';
case 'roller_coaster': return <FerrisWheel className="w-16 h-16" />;
case 'water_ride': return <Waves className="w-16 h-16" />;
case 'dark_ride': return <Theater className="w-16 h-16" />;
case 'flat_ride': return <FerrisWheel className="w-16 h-16" />;
case 'kiddie_ride': return <FerrisWheel className="w-16 h-16" />;
case 'transportation': return <Train className="w-16 h-16" />;
default: return <FerrisWheel className="w-16 h-16" />;
}
};
@@ -146,7 +146,7 @@ export default function Rides() {
{/* Page Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<div className="text-4xl">🎢</div>
<FerrisWheel className="w-10 h-10 text-primary" />
<h1 className="text-4xl font-bold">Rides & Attractions</h1>
</div>
<p className="text-lg text-muted-foreground">
@@ -233,7 +233,7 @@ export default function Rides() {
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
) : (
<div className="text-6xl opacity-50">
<div className="opacity-50 flex items-center justify-center">
{getRideIcon(ride.category)}
</div>
)}
@@ -256,7 +256,7 @@ export default function Rides() {
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
{ride.name}
</h3>
<span className="text-xl">{getRideIcon(ride.category)}</span>
<span className="flex items-center">{getRideIcon(ride.category)}</span>
</div>
{ride.park?.name && (
@@ -327,7 +327,7 @@ export default function Rides() {
</div>
) : (
<div className="text-center py-12">
<div className="text-6xl mb-4">🎢</div>
<FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
<h3 className="text-xl font-semibold mb-2">No rides found</h3>
<p className="text-muted-foreground">
Try adjusting your search criteria or filters

16
src/pages/Search.tsx
View File

@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Search, MapPin, Zap, Star } from 'lucide-react';
import { Search, MapPin, Zap, Star, Castle, FerrisWheel, Factory } from 'lucide-react';
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
import { useSearch, SearchResult } from '@/hooks/useSearch';
@@ -59,10 +59,10 @@ export default function SearchPage() {
const getTypeIcon = (type: string) => {
switch (type) {
case 'park': return '🏰';
case 'ride': return '🎢';
case 'company': return '🏭';
default: return '🔍';
case 'park': return <Castle className="w-8 h-8" />;
case 'ride': return <FerrisWheel className="w-8 h-8" />;
case 'company': return <Factory className="w-8 h-8" />;
default: return <Search className="w-8 h-8" />;
}
};
@@ -151,7 +151,7 @@ export default function SearchPage() {
>
<CardContent className="p-6">
<div className="flex items-start gap-4">
<div className="text-3xl">{getTypeIcon(result.type)}</div>
<div className="flex items-center justify-center">{getTypeIcon(result.type)}</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<h3 className="font-semibold text-lg group-hover:text-primary transition-colors truncate">
@@ -198,7 +198,7 @@ export default function SearchPage() {
{/* No Results */}
{!loading && query && filteredResults.length === 0 && (
<div className="text-center py-12">
<div className="text-6xl mb-4 opacity-50">🔍</div>
<Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No results found</h3>
<p className="text-muted-foreground mb-4">
Try searching for something else or adjust your search terms
@@ -220,7 +220,7 @@ export default function SearchPage() {
{/* Initial State */}
{!query && (
<div className="text-center py-12">
<div className="text-6xl mb-4 opacity-50">🔍</div>
<Search className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">Start your search</h3>
<p className="text-muted-foreground">
Search for theme parks, rides, or companies to get started