mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 08:31:13 -05:00
Refactor: Optimize desktop layout for entity pages
This commit is contained in:
@@ -64,7 +64,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
|
||||
<h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
|
||||
{category}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
|
||||
{stats
|
||||
.sort((a, b) => a.display_order - b.display_order)
|
||||
.map((stat) => (
|
||||
|
||||
@@ -66,7 +66,7 @@ export function RecentPhotosPreview({ rideId, onViewAll }: RecentPhotosPreviewPr
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
|
||||
{photos.map((photo) => (
|
||||
<div
|
||||
key={photo.id}
|
||||
|
||||
@@ -62,7 +62,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
|
||||
<CardTitle>Ride Highlights</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 gap-4 max-w-4xl mx-auto">
|
||||
{highlights.map((highlight, index) => (
|
||||
<div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
|
||||
<div className="mb-2">{highlight.icon}</div>
|
||||
|
||||
@@ -79,7 +79,7 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
|
||||
<CardTitle>Similar Rides You Might Enjoy</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{rides.map((ride) => (
|
||||
<RideCard
|
||||
key={ride.id}
|
||||
|
||||
@@ -71,7 +71,7 @@ export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificati
|
||||
<h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
|
||||
{category}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
|
||||
{specs
|
||||
.sort((a, b) => a.display_order - b.display_order)
|
||||
.map((spec) => (
|
||||
|
||||
Reference in New Issue
Block a user