diff --git a/src/App.tsx b/src/App.tsx index 1fe2424c..45348a62 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import ParkDetail from "./pages/ParkDetail"; import RideDetail from "./pages/RideDetail"; import Rides from "./pages/Rides"; import Manufacturers from "./pages/Manufacturers"; +import Designers from "./pages/Designers"; import Auth from "./pages/Auth"; import Profile from "./pages/Profile"; import UserSettings from "./pages/UserSettings"; @@ -42,6 +43,7 @@ function AppContent() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/manufacturers/ManufacturerCard.tsx b/src/components/manufacturers/ManufacturerCard.tsx index a8572948..6da9253a 100644 --- a/src/components/manufacturers/ManufacturerCard.tsx +++ b/src/components/manufacturers/ManufacturerCard.tsx @@ -13,7 +13,8 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) { const navigate = useNavigate(); const handleClick = () => { - navigate(`/manufacturers/${company.slug}/`); + const basePath = company.company_type === 'designer' ? '/designers' : '/manufacturers'; + navigate(`${basePath}/${company.slug}/`); }; const getCompanyIcon = (type: string) => { diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx new file mode 100644 index 00000000..d93c3c51 --- /dev/null +++ b/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([]); + 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 ( +
+
+
+
+
+
+ {[...Array(8)].map((_, i) => ( +
+ ))} +
+
+
+
+ ); + } + + return ( +
+
+ +
+ {/* Page Header */} +
+
+ +

Designers

+
+

+ Explore the designers behind your favorite rides and attractions +

+
+ {filteredCompanies.length} designers found +
+
+ + {/* Search and Filters */} +
+
+
+ + setSearchQuery(e.target.value)} + className="pl-10" + /> +
+
+ +
+
+
+ + {/* Companies Grid */} + {filteredCompanies.length > 0 ? ( +
+ {filteredCompanies.map((company) => ( + + ))} +
+ ) : ( +
+ +

No designers found

+

+ Try adjusting your search criteria +

+
+ )} +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx index 1c4bc5c1..8313d809 100644 --- a/src/pages/Manufacturers.tsx +++ b/src/pages/Manufacturers.tsx @@ -3,7 +3,7 @@ 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, Filter, SlidersHorizontal, Factory } from 'lucide-react'; +import { Search, SlidersHorizontal, Factory } from 'lucide-react'; import { Company } from '@/types/database'; import { supabase } from '@/integrations/supabase/client'; import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard'; @@ -13,11 +13,11 @@ export default function Manufacturers() { const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); const [sortBy, setSortBy] = useState('name'); - const [filterType, setFilterType] = useState('all'); + useEffect(() => { fetchCompanies(); - }, [sortBy, filterType]); + }, [sortBy]); const fetchCompanies = async () => { try { @@ -25,10 +25,8 @@ export default function Manufacturers() { .from('companies') .select('*'); - // Apply filters - if (filterType !== 'all') { - query = query.eq('company_type', filterType); - } + // Filter only manufacturers + query = query.eq('company_type', 'manufacturer'); // Apply sorting switch (sortBy) { @@ -55,13 +53,6 @@ export default function Manufacturers() { ); - const companyTypes = [ - { value: 'all', label: 'All Types' }, - { value: 'manufacturer', label: 'Manufacturers' }, - { value: 'operator', label: 'Operators' }, - { value: 'designer', label: 'Designers' }, - { value: 'contractor', label: 'Contractors' } - ]; if (loading) { return ( @@ -90,14 +81,13 @@ export default function Manufacturers() {
-

Manufacturers & Companies

+

Manufacturers

- Explore the companies behind your favorite rides and attractions + Explore the manufacturers behind your favorite rides and attractions

- {filteredCompanies.length} companies found - {companies.filter(c => c.company_type === 'manufacturer').length} manufacturers + {filteredCompanies.length} manufacturers found
@@ -107,7 +97,7 @@ export default function Manufacturers() {
setSearchQuery(e.target.value)} className="pl-10" @@ -125,19 +115,6 @@ export default function Manufacturers() { -
@@ -152,9 +129,9 @@ export default function Manufacturers() { ) : (
-

No companies found

+

No manufacturers found

- Try adjusting your search criteria or filters + Try adjusting your search criteria

)}