Refactor: Add edit buttons to listing pages

This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 13:07:29 +00:00
parent c2e271561a
commit e276725e52
4 changed files with 79 additions and 60 deletions

View File

@@ -106,22 +106,36 @@ export default function Designers() {
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="flex items-center gap-3"> <Ruler className="w-8 h-8 text-primary" />
<Ruler className="w-10 h-10 text-primary" /> <h1 className="text-4xl font-bold">Designers</h1>
<h1 className="text-4xl font-bold">Designers</h1>
</div>
{(user && isModerator()) && (
<Button onClick={() => setIsCreateModalOpen(true)}>
<Plus className="w-4 h-4 mr-2" />Create Designer
</Button>
)}
</div> </div>
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground mb-4">
Explore the designers behind your favorite rides and attractions Explore the designers behind your favorite rides and attractions
</p> </p>
<div className="flex items-center gap-2 mt-2">
<Badge variant="secondary">{filteredCompanies.length} designers found</Badge> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
{filteredCompanies.length} designers
</Badge>
</div>
<div className="flex items-center gap-2">
<Button
onClick={() => {
if (!user) {
navigate('/auth');
} else {
setIsCreateModalOpen(true);
}
}}
className="gap-2"
>
<Plus className="w-4 h-4" />
Add Designer
</Button>
</div>
</div> </div>
</div> </div>

View File

@@ -84,15 +84,27 @@ const Operators = () => {
<Header /> <Header />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<div className="flex items-center gap-3 mb-8"> {/* Page Header */}
<div className="p-2 bg-primary/10 rounded-lg"> <div className="mb-8">
<Building className="h-6 w-6 text-primary" /> <div className="flex items-center gap-3 mb-4">
<Building className="w-8 h-8 text-primary" />
<h1 className="text-4xl font-bold">Park Operators</h1>
</div> </div>
<div> <p className="text-lg text-muted-foreground mb-4">
<h1 className="text-3xl font-bold">Park Operators</h1> Discover companies that operate theme parks
<p className="text-muted-foreground"> </p>
Discover companies that operate theme parks
</p> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
{filteredAndSortedOperators?.length || 0} operators
</Badge>
{searchTerm && (
<Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
Searching: "{searchTerm}"
</Badge>
)}
</div>
</div> </div>
</div> </div>
@@ -135,19 +147,6 @@ const Operators = () => {
</div> </div>
</div> </div>
{/* Results Count */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2">
<Badge variant="secondary">
{filteredAndSortedOperators?.length || 0} park operators
</Badge>
{searchTerm && (
<Badge variant="outline">
Searching: "{searchTerm}"
</Badge>
)}
</div>
</div>
{/* Loading State */} {/* Loading State */}
{isLoading && ( {isLoading && (

View File

@@ -84,15 +84,27 @@ const ParkOwners = () => {
<Header /> <Header />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<div className="flex items-center gap-3 mb-8"> {/* Page Header */}
<div className="p-2 bg-primary/10 rounded-lg"> <div className="mb-8">
<Building2 className="h-6 w-6 text-primary" /> <div className="flex items-center gap-3 mb-4">
<Building2 className="w-8 h-8 text-primary" />
<h1 className="text-4xl font-bold">Property Owners</h1>
</div> </div>
<div> <p className="text-lg text-muted-foreground mb-4">
<h1 className="text-3xl font-bold">Property Owners</h1> Discover companies that own and manage theme parks
<p className="text-muted-foreground"> </p>
Discover companies that own and manage theme parks
</p> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
{filteredAndSortedOwners?.length || 0} property owners
</Badge>
{searchTerm && (
<Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
Searching: "{searchTerm}"
</Badge>
)}
</div>
</div> </div>
</div> </div>
@@ -135,19 +147,6 @@ const ParkOwners = () => {
</div> </div>
</div> </div>
{/* Results Count */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2">
<Badge variant="secondary">
{filteredAndSortedOwners?.length || 0} property owners
</Badge>
{searchTerm && (
<Badge variant="outline">
Searching: "{searchTerm}"
</Badge>
)}
</div>
</div>
{/* Loading State */} {/* Loading State */}
{isLoading && ( {isLoading && (

View File

@@ -116,15 +116,22 @@ export default function Rides() {
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<FerrisWheel className="w-10 h-10 text-primary" /> <FerrisWheel className="w-8 h-8 text-primary" />
<h1 className="text-4xl font-bold">Rides & Attractions</h1> <h1 className="text-4xl font-bold">Rides & Attractions</h1>
</div> </div>
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground mb-4">
Explore amazing rides and attractions from theme parks worldwide Explore amazing rides and attractions from theme parks worldwide
</p> </p>
<div className="flex items-center gap-2 mt-2">
<Badge variant="secondary">{filteredRides.length} rides found</Badge> <div className="flex items-center justify-between">
<Badge variant="outline">{rides.filter(r => r.category === 'roller_coaster').length} roller coasters</Badge> <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
{filteredRides.length} rides
</Badge>
<Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
{rides.filter(r => r.category === 'roller_coaster').length} coasters
</Badge>
</div>
</div> </div>
</div> </div>