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

Refactor: Enhance Park List View

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 16:08:32 +00:00
parent ba1c0625b0
commit 48bf6c7823
10 changed files with 659 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Designers.tsx
View File

@@ -8,12 +8,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
import { Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { DesignerCard } from '@/components/designers/DesignerCard';
import { DesignerListView } from '@/components/designers/DesignerListView';
import { DesignerForm } from '@/components/admin/DesignerForm';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
@@ -33,6 +35,7 @@ export default function Designers() {
const [sortBy, setSortBy] = useState('name');
const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
const [showFilters, setShowFilters] = useState(false);
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
const saved = localStorage.getItem('designers-sidebar-collapsed');
@@ -200,6 +203,12 @@ export default function Designers() {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
<TabsList>
<TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
<TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
@@ -246,11 +255,15 @@ export default function Designers() {
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredCompanies.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} />
))}
</div>
viewMode === 'grid' ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} />
))}
</div>
) : (
<DesignerListView designers={filteredCompanies} onDesignerClick={(d) => navigate(`/designers/${d.slug}`)} />
)
) : (
<div className="text-center py-12">
<Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />