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

Refactor cards to navigate

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:00:26 +00:00
parent 0f476db478
commit bbfdddb94f
5 changed files with 126 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -108,10 +108,15 @@ export function ContentTabs() {
).join(' ');
};
const RideCard = ({ ride }: { ride: Ride }) => (
const RideCard = ({ ride }: { ride: Ride }) => {
const handleRideClick = () => {
navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`);
};
return (
<Card
className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
onClick={() => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)}
onClick={handleRideClick}
>
<div className="relative overflow-hidden">
{/* Image/Icon Section */}
@@ -217,6 +222,7 @@ export function ContentTabs() {
</div>
</Card>
);
};
if (loading) {
return (
@@ -269,7 +275,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{popularParks.map((park) => (
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
<ParkCard key={park.id} park={park} />
))}
</div>
</TabsContent>
@@ -281,7 +287,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{trendingParks.map((park) => (
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
<ParkCard key={park.id} park={park} />
))}
</div>
</TabsContent>
@@ -317,7 +323,7 @@ export function ContentTabs() {
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
{recentParks.map((park) => (
<ParkCard key={park.id} park={park} onClick={() => navigate(`/parks/${park.slug}`)} />
<ParkCard key={park.id} park={park} />
))}
</div>
</TabsContent>

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

@@ -1,16 +1,19 @@
import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Park } from '@/types/database';
interface ParkCardProps {
park: Park;
onClick?: () => void;
}
export function ParkCard({
park,
onClick
}: ParkCardProps) {
export function ParkCard({ park }: ParkCardProps) {
const navigate = useNavigate();
const handleClick = () => {
navigate(`/parks/${park.slug}`);
};
const getStatusColor = (status: string) => {
switch (status) {
case 'operating':
@@ -40,7 +43,7 @@ export function ParkCard({
const formatParkType = (type: string) => {
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
};
return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={onClick}>
return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={handleClick}>
<div className="relative overflow-hidden">
{/* Image Placeholder with Gradient */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">

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

@@ -255,10 +255,6 @@ export function ParkGrid() {
<ParkCard
key={park.id}
park={park}
onClick={() => {
// Navigate to park detail page
console.log('Navigate to park:', park.slug);
}}
/>
))}
</div>

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

@@ -3,17 +3,15 @@ import { Park } from '@/types/database';
interface ParkGridViewProps {
parks: Park[];
onParkClick: (park: Park) => void;
}
export function ParkGridView({ parks, onParkClick }: ParkGridViewProps) {
export function ParkGridView({ parks }: ParkGridViewProps) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{parks.map((park) => (
<ParkCard
key={park.id}
park={park}
onClick={() => onParkClick(park)}
/>
))}
</div>

1
src/pages/Parks.tsx
View File

@@ -354,7 +354,6 @@ export default function Parks() {
{viewMode === 'grid' ? (
<ParkGridView
parks={filteredAndSortedParks}
onParkClick={handleParkClick}
/>
) : (
<ParkListView