import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; const speakers = [ { name: "Ava Thompson", title: "Award-Winning Interior Designer", location: "New York, NY", geography: "Northeast", industry: "Architecture & Design", expertise: ["Keynote", "Workshops", "Panels"], book: "Designing for Legacy", }, { name: "Leo Martinez", title: "Renowned Fine Artist & Muralist", location: "Los Angeles, CA", geography: "West Coast", industry: "Fine Art", expertise: ["Keynote", "Workshops", "Book Signing"], book: "Color Stories: A Muralist’s Journey", }, { name: "Maya Brooks", title: "Celebrity Photographer", location: "Atlanta, GA", geography: "Southeast", industry: "Photography", expertise: ["Keynote", "Fireside Chat", "Panels"], book: "Behind the Lens", }, ]; export default function SpeakerMenu() { const [selectedGeography, setSelectedGeography] = useState([]); const [selectedIndustry, setSelectedIndustry] = useState([]); const [selectedExpertise, setSelectedExpertise] = useState([]); const toggleFilter = (filterType, value) => { const stateSetter = filterType === "Geography" ? setSelectedGeography : filterType === "Industry" ? setSelectedIndustry : setSelectedExpertise; const currentState = filterType === "Geography" ? selectedGeography : filterType === "Industry" ? selectedIndustry : selectedExpertise; if (currentState.includes(value)) { stateSetter(currentState.filter((item) => item !== value)); } else { stateSetter([...currentState, value]); } }; const filteredSpeakers = speakers.filter((speaker) => { const geoMatch = selectedGeography.length === 0 || selectedGeography.includes(speaker.geography); const industryMatch = selectedIndustry.length === 0 || selectedIndustry.includes(speaker.industry); const expertiseMatch = selectedExpertise.length === 0 || speaker.expertise.some((exp) => selectedExpertise.includes(exp)); return geoMatch && industryMatch && expertiseMatch; }); return (
{/* Sidebar Filters */}

Filter Speakers

Geography

{['Northeast', 'Southeast', 'Midwest', 'Southwest', 'West Coast', 'International'].map((geo) => (
toggleFilter("Geography", geo)} />
))}

Industry

{['Architecture & Design', 'Fine Art', 'Photography', 'Fashion', 'Culinary Arts', 'Wellness & Lifestyle', 'Entrepreneurship & Leadership'].map((industry) => (
toggleFilter("Industry", industry)} />
))}

Expertise

{['Keynote', 'Moderated Conversations', 'Panels', 'Workshops', 'Book Signings', 'Fireside Chats'].map((expertise) => (
toggleFilter("Expertise", expertise)} />
))}
{/* Speaker Results */}

Speakers

{filteredSpeakers.length === 0 ? (

No speakers match the selected filters.

) : ( filteredSpeakers.map((speaker, idx) => (

{speaker.name}

{speaker.title}

📍 {speaker.location}

🏢 {speaker.industry}

💡 Expertise: {speaker.expertise.join(", ")}

📖 Featured Book: {speaker.book}

)) )}
); }