72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { Navbar3 } from "../components/Navbar";
|
|
import { Header23 } from "../components/Header23";
|
|
import { Filters5 } from "../components/Filters5";
|
|
import { Event33 } from "../components/Event33";
|
|
import { Banner15 } from "../components/Banner15";
|
|
import { Footer3 } from "../components/Footer";
|
|
import { ALL_EVENTS } from "../data/events";
|
|
|
|
const TYPE_TABS = ["Talk", "Workshop", "Interaction", "AI and Future"];
|
|
const LEVEL_TABS: Record<string, string> = {
|
|
"Senior": "Senior",
|
|
"Mid-Level": "Mid-Level",
|
|
"Junior": "Junior",
|
|
};
|
|
|
|
const Programm = () => {
|
|
const [activeTab, setActiveTab] = useState("all");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [activeDay, setActiveDay] = useState("all");
|
|
|
|
const filteredEvents = useMemo(() => {
|
|
return ALL_EVENTS.filter((e) => {
|
|
if (activeTab !== "all") {
|
|
const matchesType = TYPE_TABS.includes(activeTab) && e.type === activeTab;
|
|
const matchesLevel = LEVEL_TABS[activeTab] && e.level === LEVEL_TABS[activeTab];
|
|
if (!matchesType && !matchesLevel) return false;
|
|
}
|
|
if (searchQuery) {
|
|
const q = searchQuery.toLowerCase();
|
|
if (!e.title.toLowerCase().includes(q) && !e.speaker.toLowerCase().includes(q)) return false;
|
|
}
|
|
if (activeDay !== "all" && e.day !== activeDay) return false;
|
|
return true;
|
|
});
|
|
}, [activeTab, searchQuery, activeDay]);
|
|
|
|
const activeTags = [
|
|
searchQuery ? { label: searchQuery, onRemove: () => setSearchQuery("") } : null,
|
|
activeDay !== "all" ? { label: activeDay, onRemove: () => setActiveDay("all") } : null,
|
|
activeTab !== "all" ? { label: activeTab, onRemove: () => setActiveTab("all") } : null,
|
|
].filter(Boolean) as { label: string; onRemove: () => void }[];
|
|
|
|
const handleReset = () => {
|
|
setActiveTab("all");
|
|
setSearchQuery("");
|
|
setActiveDay("all");
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Navbar3 />
|
|
<Header23 />
|
|
<Filters5
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
activeDay={activeDay}
|
|
onDayChange={setActiveDay}
|
|
activeTags={activeTags}
|
|
onReset={handleReset}
|
|
/>
|
|
<Event33 events={filteredEvents} />
|
|
<Banner15 />
|
|
<Footer3 />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Programm;
|