Refactor manufacturers page

src/pages/Designers.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { Header } from '@/components/layout/Header';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Search, SlidersHorizontal, Palette } from 'lucide-react';
+import { Company } from '@/types/database';
+import { supabase } from '@/integrations/supabase/client';
+import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
+
+export default function Designers() {
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+
+  useEffect(() => {
+    fetchCompanies();
+  }, [sortBy]);
+
+  const fetchCompanies = async () => {
+    try {
+      let query = supabase
+        .from('companies')
+        .select('*');
+
+      // Filter only designers
+      query = query.eq('company_type', 'designer');
+
+      // Apply sorting
+      switch (sortBy) {
+        case 'founded':
+          query = query.order('founded_year', { ascending: false, nullsFirst: false });
+          break;
+        default:
+          query = query.order('name');
+      }
+
+      const { data } = await query;
+      setCompanies(data || []);
+    } catch (error) {
+      console.error('Error fetching companies:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredCompanies = companies.filter(company =>
+    company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    company.headquarters_location?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    company.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="animate-pulse space-y-6">
+            <div className="h-12 bg-muted rounded w-1/3"></div>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {[...Array(8)].map((_, i) => (
+                <div key={i} className="h-64 bg-muted rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        {/* Page Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <Palette className="w-10 h-10 text-primary" />
+            <h1 className="text-4xl font-bold">Designers</h1>
+          </div>
+          <p className="text-lg text-muted-foreground">
+            Explore the designers behind your favorite rides and attractions
+          </p>
+          <div className="flex items-center gap-2 mt-2">
+            <Badge variant="secondary">{filteredCompanies.length} designers found</Badge>
+          </div>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="mb-8 space-y-4">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <Input
+                placeholder="Search designers by name, location, or description..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <div className="flex gap-2">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px]">
+                  <SlidersHorizontal className="w-4 h-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* Companies Grid */}
+        {filteredCompanies.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {filteredCompanies.map((company) => (
+              <ManufacturerCard key={company.id} company={company} />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <Palette className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+            <h3 className="text-xl font-semibold mb-2">No designers found</h3>
+            <p className="text-muted-foreground">
+              Try adjusting your search criteria
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}