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 */}
toggleFilter("Geography", geo)}
/>
))}
toggleFilter("Industry", industry)}
/>
))}
toggleFilter("Expertise", expertise)}
/>
))}
{/* Speaker Results */}
))
)}
);
}
Filter Speakers
Geography
{['Northeast', 'Southeast', 'Midwest', 'Southwest', 'West Coast', 'International'].map((geo) => (Industry
{['Architecture & Design', 'Fine Art', 'Photography', 'Fashion', 'Culinary Arts', 'Wellness & Lifestyle', 'Entrepreneurship & Leadership'].map((industry) => (Expertise
{['Keynote', 'Moderated Conversations', 'Panels', 'Workshops', 'Book Signings', 'Fireside Chats'].map((expertise) => (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}