update programm and speaker pages with filters and new layouts
This commit is contained in:
Alisa Cantillo-Olsson
parent
3ed08a71a6
commit
9d5f1fc841
@ -1,283 +1,79 @@
|
||||
import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { BiMap } from "react-icons/bi";
|
||||
|
||||
type ImageProps = {
|
||||
src: string;
|
||||
alt?: string;
|
||||
};
|
||||
export type EventLevel = "Senior" | "Mid-Level" | "Junior";
|
||||
export type EventType = "Talk" | "Workshop" | "Interaction" | "AI and Future";
|
||||
export type EventDay = "Donnerstag" | "Freitag";
|
||||
|
||||
type ScheduledEvent = {
|
||||
url: string;
|
||||
export type ProgramEvent = {
|
||||
id: string;
|
||||
time: string;
|
||||
image: ImageProps;
|
||||
image: { src: string; alt: string };
|
||||
title: string;
|
||||
speaker: string;
|
||||
location: string;
|
||||
button: ButtonProps;
|
||||
};
|
||||
|
||||
type Tab = {
|
||||
value: string;
|
||||
trigger: string;
|
||||
content: ScheduledEvent[];
|
||||
type: EventType;
|
||||
level: EventLevel;
|
||||
day: EventDay;
|
||||
speakerUrl: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
tagline: string;
|
||||
heading: string;
|
||||
description: string;
|
||||
tabs: Tab[];
|
||||
events: ProgramEvent[];
|
||||
};
|
||||
|
||||
export type Event33Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
||||
const levelStyles: Record<EventLevel, string> = {
|
||||
Senior: "bg-electric-violet text-cloud-white",
|
||||
"Mid-Level": "bg-electric-violet text-cloud-white",
|
||||
Junior: "bg-acid-lime text-tech-navy",
|
||||
};
|
||||
|
||||
export const Event33 = (props: Event33Props) => {
|
||||
const { tagline, heading, description, tabs } = {
|
||||
...Event33Defaults,
|
||||
...props,
|
||||
};
|
||||
const EventRow = ({ event }: { event: ProgramEvent }) => (
|
||||
<div className="grid grid-cols-1 items-center gap-4 border-t border-gray-200 py-6 last-of-type:border-b md:grid-cols-[5.5rem_5.5rem_1fr_max-content_max-content_max-content] md:gap-6 md:py-7">
|
||||
<span className="text-sm font-semibold text-tech-navy">{event.time}</span>
|
||||
|
||||
<div className="w-full aspect-square md:w-[5.5rem]">
|
||||
<img src={event.image.src} alt={event.image.alt} className="size-full object-cover" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-lg font-bold text-tech-navy">{event.title}</h5>
|
||||
<p className="text-sm text-gray-500">{event.speaker}</p>
|
||||
</div>
|
||||
|
||||
<span className={`justify-self-start rounded-full px-3 py-1 text-xs font-semibold md:justify-self-auto ${levelStyles[event.level]}`}>
|
||||
{event.level}
|
||||
</span>
|
||||
|
||||
<a
|
||||
href={event.speakerUrl}
|
||||
className="shrink-0 rounded-full border border-electric-violet px-4 py-1.5 text-sm font-semibold text-electric-violet hover:bg-electric-violet hover:text-cloud-white transition-colors"
|
||||
>
|
||||
Über {event.speaker.split(" ")[0]} {event.speaker.split(" ").slice(-1)[0]}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/tickets"
|
||||
className="shrink-0 rounded-full bg-electric-violet px-4 py-1.5 text-sm font-semibold text-cloud-white hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Tickets kaufen
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Event33 = ({ events }: Props) => {
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
|
||||
<section className="px-[5%] py-10 bg-cloud-white font-barlow">
|
||||
<div className="container">
|
||||
<div className="mb-12 md:mb-18 lg:mb-20">
|
||||
<div className="max-w-lg">
|
||||
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
||||
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
|
||||
<p className="md:text-md">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs defaultValue={tabs[0].value} className="flex flex-col justify-start">
|
||||
<TabsList className="no-scrollbar mb-12 ml-[-5vw] flex w-screen items-center overflow-auto pl-[5vw] md:ml-0 md:w-full md:overflow-hidden md:pl-0">
|
||||
{tabs.map((tab, index) => (
|
||||
<TabsTrigger
|
||||
key={index}
|
||||
value={tab.value}
|
||||
className="px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
|
||||
>
|
||||
{tab.trigger}
|
||||
</TabsTrigger>
|
||||
{events.length === 0 ? (
|
||||
<p className="py-16 text-center text-gray-400">Keine Veranstaltungen gefunden.</p>
|
||||
) : (
|
||||
<div>
|
||||
{events.map((event) => (
|
||||
<EventRow key={event.id} event={event} />
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((tab) => (
|
||||
<TabsContent
|
||||
key={tab.value}
|
||||
value={tab.value}
|
||||
className="data-[state=active]:animate-tabs"
|
||||
>
|
||||
{tab.content.map((event, index) => (
|
||||
<ScheduledEvent key={index} {...event} />
|
||||
))}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const ScheduledEvent: React.FC<ScheduledEvent> = ({
|
||||
url,
|
||||
time,
|
||||
image,
|
||||
title,
|
||||
speaker,
|
||||
location,
|
||||
button,
|
||||
}) => {
|
||||
return (
|
||||
<div className="grid grid-cols-1 items-center gap-4 border-t border-border-primary py-6 last-of-type:border-b md:grid-cols-[6rem_max-content_1fr_max-content] md:gap-8 md:py-8">
|
||||
<div className="text-md md:text-lg">{time}</div>
|
||||
<div className="w-full md:w-36">
|
||||
<a href={url} className="relative block aspect-[3/2] md:aspect-square">
|
||||
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid auto-cols-fr grid-cols-1 items-center gap-4 lg:grid-cols-[1fr_.25fr]">
|
||||
<div>
|
||||
<h5 className="text-xl font-bold md:text-2xl">{title}</h5>
|
||||
<div>{speaker}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<BiMap className="size-6 flex-none" />
|
||||
<span>{location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button {...button} asChild>
|
||||
<a href={url}>{button.title}</a>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Event33Defaults: Props = {
|
||||
tagline: "Tagline",
|
||||
heading: "Schedule",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
||||
tabs: [
|
||||
{
|
||||
value: "fri-09-feb",
|
||||
trigger: "Fri 09 Feb",
|
||||
content: [
|
||||
{
|
||||
url: "#",
|
||||
time: "8:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 1",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "9:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 2",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "10:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 3",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "sat-10-feb",
|
||||
trigger: "Sat 10 Feb",
|
||||
content: [
|
||||
{
|
||||
url: "#",
|
||||
time: "8:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 4",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "9:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 5",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "10:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 6",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "sun-11-feb",
|
||||
trigger: "Sun 11 Feb",
|
||||
content: [
|
||||
{
|
||||
url: "#",
|
||||
time: "8:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 7",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "9:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 8",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
time: "10:00 am",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image 9",
|
||||
},
|
||||
title: "Event title heading",
|
||||
speaker: "Speaker",
|
||||
location: "Location",
|
||||
button: {
|
||||
variant: "secondary",
|
||||
size: "primary",
|
||||
title: "View details",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
export default Event33;
|
||||
|
||||
@ -1,316 +1,240 @@
|
||||
import React, { useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { BiFilter, BiSearch } from "react-icons/bi";
|
||||
import { RxChevronDown } from "react-icons/rx";
|
||||
import { IoCloseOutline } from "react-icons/io5";
|
||||
import { RxChevronDown } from "react-icons/rx";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import type { Variants } from "framer-motion";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Input,
|
||||
Label,
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
Tabs,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@relume_io/relume-ui";
|
||||
|
||||
type FilterValues = {
|
||||
filterOne: string;
|
||||
filterTwo: string[];
|
||||
filterThree: string[];
|
||||
filterFour: string[];
|
||||
export type FilterTab = { value: string; label: string };
|
||||
type ActiveTag = { label: string; onRemove: () => void };
|
||||
|
||||
type Props = {
|
||||
tabs?: FilterTab[];
|
||||
activeTab?: string;
|
||||
onTabChange?: (tab: string) => void;
|
||||
searchQuery?: string;
|
||||
onSearchChange?: (q: string) => void;
|
||||
searchLabel?: string;
|
||||
resetLabel?: string;
|
||||
activeTags?: ActiveTag[];
|
||||
onReset?: () => void;
|
||||
// Programm-only
|
||||
useFilterToggle?: boolean;
|
||||
showDayFilter?: boolean;
|
||||
showSortButton?: boolean;
|
||||
activeDay?: string;
|
||||
onDayChange?: (day: string) => void;
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ value: "View all", trigger: "View all" },
|
||||
{ value: "Category one", trigger: "Category one" },
|
||||
{ value: "Category two", trigger: "Category two" },
|
||||
{ value: "Category three", trigger: "Category three" },
|
||||
{ value: "Category four", trigger: "Category four" },
|
||||
const PROGRAMM_TABS: FilterTab[] = [
|
||||
{ value: "all", label: "Alle Anzeigen" },
|
||||
{ value: "Talk", label: "Talk" },
|
||||
{ value: "Workshop", label: "Workshop" },
|
||||
{ value: "Interaction", label: "Interaction" },
|
||||
{ value: "AI and Future", label: "AI and Future" },
|
||||
{ value: "Senior", label: "Senior Level" },
|
||||
{ value: "Mid-Level", label: "Mid-Level" },
|
||||
{ value: "Junior", label: "Junior-Level" },
|
||||
];
|
||||
|
||||
const options = [
|
||||
{ value: "option-1", label: "Option one" },
|
||||
{ value: "option-2", label: "Option two" },
|
||||
{ value: "option-3", label: "Option three" },
|
||||
{ value: "option-4", label: "Option four" },
|
||||
{ value: "option-5", label: "Option five" },
|
||||
const DAYS = [
|
||||
{ value: "all", label: "Alle Tage" },
|
||||
{ value: "Donnerstag", label: "Donnerstag" },
|
||||
{ value: "Freitag", label: "Freitag" },
|
||||
];
|
||||
|
||||
const containerVariants: Variants = {
|
||||
initial: {
|
||||
height: 0,
|
||||
opacity: 0,
|
||||
transition: { duration: 0.2, ease: "easeInOut" },
|
||||
},
|
||||
animate: {
|
||||
height: "auto",
|
||||
opacity: 1,
|
||||
transition: { duration: 0.2, ease: "easeInOut" },
|
||||
},
|
||||
exit: {
|
||||
height: 0,
|
||||
opacity: 0,
|
||||
transition: { duration: 0.2, ease: "easeInOut" },
|
||||
},
|
||||
};
|
||||
|
||||
export const Filters5 = () => {
|
||||
export const Filters5 = ({
|
||||
tabs = PROGRAMM_TABS,
|
||||
activeTab = "all",
|
||||
onTabChange = () => {},
|
||||
searchQuery = "",
|
||||
onSearchChange = () => {},
|
||||
searchLabel = "Stichwortsuche",
|
||||
resetLabel = "Zurücksetzen",
|
||||
activeTags = [],
|
||||
onReset = () => {},
|
||||
useFilterToggle = true,
|
||||
showDayFilter = true,
|
||||
showSortButton = true,
|
||||
activeDay = "all",
|
||||
onDayChange = () => {},
|
||||
}: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedValues, setSelectedValues] = useState<FilterValues>({
|
||||
filterOne: "",
|
||||
filterTwo: ["option-1"],
|
||||
filterThree: ["option-1"],
|
||||
filterFour: ["option-1"],
|
||||
});
|
||||
const [sortOpen, setSortOpen] = useState(false);
|
||||
|
||||
const handleClear = (filter: keyof FilterValues) => {
|
||||
setSelectedValues((prev) => ({
|
||||
...prev,
|
||||
[filter]: Array.isArray(prev[filter]) ? [] : "",
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (filter: keyof Omit<FilterValues, "filterOne">, value: string) => {
|
||||
setSelectedValues((prev) => {
|
||||
const currentItems = prev[filter];
|
||||
return {
|
||||
...prev,
|
||||
[filter]: currentItems.includes(value)
|
||||
? currentItems.filter((item) => item !== value)
|
||||
: [...currentItems, value],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const getSelectedLabels = (filter: keyof FilterValues) => {
|
||||
if (!selectedValues[filter].length) return "Select options";
|
||||
if (selectedValues[filter].length === 1) {
|
||||
return options.find((opt) => opt.value === selectedValues[filter][0])?.label;
|
||||
}
|
||||
return `${selectedValues[filter].length} selected`;
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
|
||||
<div className="container">
|
||||
<div className="mb-12 w-full text-center md:mb-18 lg:mb-20">
|
||||
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Collection</h1>
|
||||
<p className="md:text-md">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div className="mb-8 grid auto-cols-fr grid-cols-2 grid-rows-[auto_auto] items-center justify-between gap-x-6 gap-y-8 lg:grid-cols-[1fr_max-content_1fr] lg:gap-y-0">
|
||||
<Button
|
||||
className="w-fit gap-3 self-start bg-electric-violet text-cloud-white rounded-2xl px-6 py-3 border-electric-violet font-semibold"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
const TabRow = () => (
|
||||
<div className="flex items-center gap-1 overflow-x-auto no-scrollbar">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => onTabChange(tab.value)}
|
||||
className={`shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold transition-colors ${
|
||||
activeTab === tab.value
|
||||
? "bg-electric-violet text-cloud-white"
|
||||
: "text-tech-navy hover:text-electric-violet"
|
||||
}`}
|
||||
>
|
||||
<BiFilter className="size-6" />
|
||||
<span>Filter</span>
|
||||
</Button>
|
||||
<Tabs
|
||||
defaultValue={tabs[0].value}
|
||||
className="no-scrollbar flex w-full flex-col items-center justify-center overflow-scroll [grid-area:2/1/3/3] md:overflow-auto lg:[grid-area:auto/auto/auto/auto]"
|
||||
>
|
||||
<TabsList className="flex w-screen items-center justify-start pl-[5vw] md:w-full md:justify-center md:overflow-hidden md:pl-0">
|
||||
{tabs.map((tab, index) => (
|
||||
<TabsTrigger
|
||||
key={index}
|
||||
value={tab.value}
|
||||
className="px-4 data-[state=active]:border data-[state=active]:border-electric-violet data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-electric-violet font-barlow"
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SearchRow = () => (
|
||||
<div className="mt-4">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-tech-navy">{searchLabel}</span>
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="text-sm font-semibold text-electric-violet underline"
|
||||
>
|
||||
{resetLabel}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 rounded-full border border-electric-violet px-4 py-2 text-sm">
|
||||
<BiSearch className="size-4 shrink-0 text-gray-400" />
|
||||
<input
|
||||
className="flex-1 bg-transparent outline-none placeholder-gray-400 text-sm"
|
||||
placeholder="Suchen..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Speaker variant: always-visible search, no toggle
|
||||
if (!useFilterToggle) {
|
||||
return (
|
||||
<section className="px-[5%] py-8 bg-cloud-white font-barlow border-b border-gray-100">
|
||||
<div className="container">
|
||||
<TabRow />
|
||||
<SearchRow />
|
||||
{activeTags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{activeTags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="flex items-center gap-1 rounded-full border border-electric-violet px-3 py-1 text-sm font-semibold text-electric-violet"
|
||||
>
|
||||
{tab.trigger}
|
||||
</TabsTrigger>
|
||||
{tag.label}
|
||||
<button onClick={tag.onRemove}>
|
||||
<IoCloseOutline className="size-4" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="-mr-2 flex items-center gap-2 justify-self-end">
|
||||
<p className="whitespace-nowrap">Sort by</p>
|
||||
<RxChevronDown className="shrink-0 text-text-primary transition-transform duration-300" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{[
|
||||
"Most Popular",
|
||||
"Most Recent",
|
||||
"Name: A to Z",
|
||||
"Name: Z to A",
|
||||
"Price: Low to High",
|
||||
"Price: High to Low",
|
||||
].map((option) => (
|
||||
<DropdownMenuItem key={option}>{option}</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AnimatePresence initial={false} mode="wait">
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Programm variant: toggle button, collapsible panel
|
||||
return (
|
||||
<section className="px-[5%] py-8 bg-cloud-white font-barlow border-b border-gray-100">
|
||||
<div className="container">
|
||||
<div className="flex items-center gap-4 overflow-x-auto no-scrollbar">
|
||||
<button
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
className="flex shrink-0 items-center gap-2 rounded-full bg-electric-violet px-4 py-2 text-sm font-semibold text-cloud-white"
|
||||
>
|
||||
<BiFilter className="size-5" />
|
||||
Filter
|
||||
</button>
|
||||
<TabRow />
|
||||
{showSortButton && (
|
||||
<div className="relative ml-auto shrink-0">
|
||||
<button
|
||||
onClick={() => setSortOpen((v) => !v)}
|
||||
className="flex items-center gap-1 text-sm font-semibold text-electric-violet"
|
||||
>
|
||||
Sortieren{" "}
|
||||
<RxChevronDown
|
||||
className={`transition-transform ${sortOpen ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
{sortOpen && (
|
||||
<div className="absolute right-0 top-8 z-50 w-44 border border-gray-200 bg-white shadow-sm">
|
||||
{["Zeit aufsteigend", "Zeit absteigend"].map((opt) => (
|
||||
<button
|
||||
key={opt}
|
||||
className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
|
||||
onClick={() => setSortOpen(false)}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: "easeInOut" }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mb-8 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-4">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span>Filter One</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="link"
|
||||
onClick={() => handleClear("filterOne")}
|
||||
className="text-sm"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
placeholder="Stichwortsuche"
|
||||
icon={<BiSearch className="size-6" />}
|
||||
value={selectedValues.filterOne}
|
||||
onChange={(e) =>
|
||||
setSelectedValues((prev) => ({
|
||||
...prev,
|
||||
filterOne: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="border-electric-violet rounded-2xl"
|
||||
/>
|
||||
<div className="mt-4 flex flex-wrap items-end gap-4">
|
||||
<div className="flex min-w-[220px] flex-1 items-center gap-2 rounded-full border border-electric-violet px-4 py-2 text-sm">
|
||||
<BiSearch className="size-4 shrink-0 text-gray-400" />
|
||||
<input
|
||||
className="flex-1 bg-transparent outline-none placeholder-gray-400 text-sm"
|
||||
placeholder={searchLabel}
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span>Filter Two</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="link"
|
||||
onClick={() => handleClear("filterTwo")}
|
||||
className="text-sm"
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="shrink-0 text-sm font-semibold text-electric-violet underline"
|
||||
>
|
||||
{resetLabel}
|
||||
</button>
|
||||
{showDayFilter && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs font-semibold text-gray-500">
|
||||
Filtern nach Eventtage
|
||||
</span>
|
||||
<select
|
||||
value={activeDay}
|
||||
onChange={(e) => onDayChange(e.target.value)}
|
||||
className="rounded-full border border-electric-violet px-4 py-2 text-sm font-semibold text-tech-navy outline-none"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<Select value="" onValueChange={() => {}}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={getSelectedLabels("filterTwo")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((option) => (
|
||||
<div key={option.value} className="flex items-center space-x-2 p-2">
|
||||
<Checkbox
|
||||
id={`filter-two-${option.value}`}
|
||||
checked={selectedValues.filterTwo.includes(option.value)}
|
||||
onCheckedChange={() => handleCheckboxChange("filterTwo", option.value)}
|
||||
/>
|
||||
<Label
|
||||
className="flex-grow cursor-pointer"
|
||||
htmlFor={`filter-two-${option.value}`}
|
||||
onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
|
||||
e.preventDefault();
|
||||
handleCheckboxChange("filterTwo", option.value);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Label>
|
||||
</div>
|
||||
{DAYS.map((d) => (
|
||||
<option key={d.value} value={d.value}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span>Filter Three</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="link"
|
||||
onClick={() => handleClear("filterThree")}
|
||||
className="text-sm"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</select>
|
||||
</div>
|
||||
<Select value="" onValueChange={() => {}}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={getSelectedLabels("filterThree")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((option) => (
|
||||
<div key={option.value} className="flex items-center space-x-2 px-2 py-1.5">
|
||||
<Checkbox
|
||||
id={`filter-three-${option.value}`}
|
||||
checked={selectedValues.filterThree.includes(option.value)}
|
||||
onCheckedChange={() =>
|
||||
handleCheckboxChange("filterThree", option.value)
|
||||
}
|
||||
/>
|
||||
<Label
|
||||
className="flex-grow cursor-pointer"
|
||||
htmlFor={`filter-three-${option.value}`}
|
||||
onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
|
||||
e.preventDefault();
|
||||
handleCheckboxChange("filterThree", option.value);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span>Filter Four</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="link"
|
||||
onClick={() => handleClear("filterFour")}
|
||||
className="text-sm"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<Select value="" onValueChange={() => {}}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={getSelectedLabels("filterFour")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((option) => (
|
||||
<div key={option.value} className="flex items-center space-x-2 px-2 py-1.5">
|
||||
<Checkbox
|
||||
id={`filter-four-${option.value}`}
|
||||
checked={selectedValues.filterFour.includes(option.value)}
|
||||
onCheckedChange={() => handleCheckboxChange("filterFour", option.value)}
|
||||
/>
|
||||
<Label
|
||||
className="flex-grow cursor-pointer"
|
||||
htmlFor={`filter-four-${option.value}`}
|
||||
onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
|
||||
e.preventDefault();
|
||||
handleCheckboxChange("filterFour", option.value);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{activeTags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{activeTags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="flex items-center gap-1 rounded-full border border-electric-violet px-3 py-1 text-sm font-semibold text-electric-violet"
|
||||
>
|
||||
{tag.label}
|
||||
<button onClick={tag.onRemove}>
|
||||
<IoCloseOutline className="size-4" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div>
|
||||
<div className="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filters5;
|
||||
|
||||
@ -2,170 +2,199 @@ import speaker1 from "../assets/speakers/speaker1.jpg";
|
||||
import speaker2 from "../assets/speakers/speaker2.jpg";
|
||||
import speaker3 from "../assets/speakers/speaker3.jpg";
|
||||
import speaker4 from "../assets/speakers/speaker4.jpg";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { BiLogoDribbble, BiLogoLinkedinSquare } from "react-icons/bi";
|
||||
import { FaXTwitter } from "react-icons/fa6";
|
||||
import { BiLogoLinkedinSquare } from "react-icons/bi";
|
||||
|
||||
type ImageProps = {
|
||||
src: string;
|
||||
alt?: string;
|
||||
};
|
||||
|
||||
type Footer = {
|
||||
heading: string;
|
||||
description: string;
|
||||
button: ButtonProps;
|
||||
};
|
||||
|
||||
type SocialLink = {
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
type TeamMember = {
|
||||
type Talk = {
|
||||
title: string;
|
||||
type: "Talk" | "Workshop" | "Networking" | "AI and Future" | "Interaction";
|
||||
};
|
||||
|
||||
export type TeamMember = {
|
||||
image: ImageProps;
|
||||
name: string;
|
||||
jobTitle: string;
|
||||
role: string;
|
||||
company: string;
|
||||
companyUrl?: string;
|
||||
description: string;
|
||||
category: string;
|
||||
talks: Talk[];
|
||||
socialLinks: SocialLink[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
tagline: string;
|
||||
heading: string;
|
||||
description: string;
|
||||
teamMembers: TeamMember[];
|
||||
footerContent: Footer;
|
||||
};
|
||||
|
||||
export type Team4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
||||
|
||||
const talkBadgeClass = (type: Talk["type"]) => {
|
||||
if (type === "Workshop") return "bg-acid-lime text-tech-navy";
|
||||
if (type === "Networking") return "bg-acid-lime text-tech-navy";
|
||||
return "bg-electric-violet text-cloud-white";
|
||||
};
|
||||
|
||||
const MemberCard = ({ member }: { member: TeamMember }) => (
|
||||
<div className="flex flex-col font-barlow">
|
||||
<div className="relative mb-5 aspect-square w-full overflow-hidden">
|
||||
<img
|
||||
src={member.image.src}
|
||||
alt={member.image.alt}
|
||||
className="absolute inset-0 size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h5 className="text-md font-bold md:text-lg">{member.name}</h5>
|
||||
<p className="text-sm text-gray-600">{member.role}</p>
|
||||
<a
|
||||
href={member.companyUrl ?? "#"}
|
||||
className="mb-3 text-sm underline underline-offset-2 text-tech-navy"
|
||||
>
|
||||
{member.company}
|
||||
</a>
|
||||
<p className="mb-4 text-sm leading-relaxed text-gray-700">{member.description}</p>
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
{member.talks.map((talk, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`rounded-full px-3 py-1 text-xs font-semibold ${talkBadgeClass(talk.type)}`}
|
||||
>
|
||||
{talk.title}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-auto flex gap-3">
|
||||
{member.socialLinks.map((link, i) => (
|
||||
<a key={i} href={link.href}>
|
||||
{link.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Team4 = (props: Team4Props) => {
|
||||
const { tagline, heading, description, teamMembers, footerContent } = {
|
||||
...Team4Defaults,
|
||||
...props,
|
||||
};
|
||||
const { teamMembers } = { ...Team4Defaults, ...props };
|
||||
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||
<section className="px-[5%] py-16 md:py-24 bg-cloud-white font-barlow">
|
||||
<div className="container">
|
||||
<div className="rb-12 mb-12 max-w-lg md:mb-18 lg:mb-20">
|
||||
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
||||
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
|
||||
{heading}
|
||||
</h2>
|
||||
<p className="md:text-md">{description}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 items-start justify-items-start gap-x-8 gap-y-12 md:grid-cols-2 md:gap-x-8 md:gap-y-16 lg:grid-cols-4">
|
||||
{teamMembers.map((member, index) => (
|
||||
<TeamMember key={index} member={member} />
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-14 w-full max-w-md md:mt-20 lg:mt-24">
|
||||
<h4 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
|
||||
{footerContent.heading}
|
||||
</h4>
|
||||
<p className="md:text-md">{footerContent.description}</p>
|
||||
<div className="mt-6 flex flex-wrap gap-4 md:mt-8">
|
||||
<Button {...footerContent.button}>{footerContent.button.title}</Button>
|
||||
{teamMembers.length === 0 ? (
|
||||
<p className="py-16 text-center text-gray-400">Keine Speaker gefunden.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{teamMembers.map((member, i) => (
|
||||
<MemberCard key={i} member={member} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const TeamMember = ({ member }: { member: TeamMember }) => {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="relative mb-5 aspect-square size-full overflow-hidden md:mb-6 md:pt-[100%]">
|
||||
<img
|
||||
src={member.image.src}
|
||||
alt={member.image.alt}
|
||||
className="absolute inset-0 size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3 md:mb-4">
|
||||
<h5 className="text-md font-semibold md:text-lg">{member.name}</h5>
|
||||
<h6 className="md:text-md">{member.jobTitle}</h6>
|
||||
</div>
|
||||
<p>{member.description}</p>
|
||||
<div className="mt-6 grid grid-flow-col grid-cols-[max-content] gap-[0.875rem] self-start">
|
||||
{member.socialLinks.map((link, index) => (
|
||||
<a key={index} href={link.href}>
|
||||
{link.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Team4Defaults: Props = {
|
||||
tagline: "",
|
||||
heading: "Unsere Speaker",
|
||||
description: "",
|
||||
teamMembers: [
|
||||
{
|
||||
image: { src: speaker1, alt: "Jens Riegelsberger" },
|
||||
name: "Jens Riegelsberger",
|
||||
jobTitle: "UX Director · Google",
|
||||
description: "Jens leitet die UX-Teams für Search und Maps sowie die globale UXR-Infrastruktur.",
|
||||
role: "UX Director",
|
||||
company: "Google",
|
||||
description:
|
||||
"Jens leitet die UX-Teams für Search und Maps sowie die globale UXR-Infrastruktur. Der HCI-Experte lehrte als Gastprofessor an der UdK Berlin und bringt Erfahrung von Stationen bei Microsoft Research, Amazon und Apple mit.",
|
||||
category: "Research",
|
||||
talks: [
|
||||
{ title: "Talk: Scaling Research", type: "Talk" },
|
||||
{ title: "Workshop: Skalierbare Research-Infrastruktur", type: "Workshop" },
|
||||
],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: speaker2, alt: "Marcus J. Low" },
|
||||
name: "Marcus J. Low",
|
||||
jobTitle: "Principal Designer · Airbnb",
|
||||
description: "Als Mitentwickler des ersten Airbnb Design Systems spricht Marcus über die Balance zwischen Markenästhetik und funktionaler Logik.",
|
||||
role: "Principal Designer",
|
||||
company: "Airbnb",
|
||||
description:
|
||||
"Als Mitentwickler des ersten Airbnb Design Systems spricht Marcus über die Balance zwischen Markenästhetik und funktionaler Logik.",
|
||||
category: "Design / UX",
|
||||
talks: [{ title: "Workshop: The Future of Tokens", type: "Workshop" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: speaker3, alt: "Reto Gwerder" },
|
||||
name: "Reto Gwerder",
|
||||
jobTitle: "Head of Product · Ginetta",
|
||||
description: "Reto steht für Schweizer Design-Qualität. Er analysiert, warum Simplizität oft die größte technische Herausforderung ist.",
|
||||
role: "Head of Product",
|
||||
company: "Ginetta",
|
||||
description:
|
||||
"Reto steht für Schweizer Design-Qualität. Er analysiert, warum Simplizität oft die größte technische Herausforderung ist.",
|
||||
category: "Strategie",
|
||||
talks: [{ title: "Talk: Simplify or Die", type: "Talk" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: speaker4, alt: "Dr. Elena Rossi" },
|
||||
name: "Dr. Elena Rossi",
|
||||
jobTitle: "Cognitive Psychologist · University of Milan",
|
||||
description: "Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert.",
|
||||
role: "Cognitive Psychologist",
|
||||
company: "University of Milan",
|
||||
description:
|
||||
"Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert und wann wir uns manipuliert fühlen.",
|
||||
category: "Psychologie",
|
||||
talks: [{ title: "Deep Dive: Psychological UX", type: "Talk" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg", alt: "Dr. Elena Rossi" },
|
||||
name: "Dr. Elena Rossi",
|
||||
jobTitle: "Cognitive Psychologist · University of Milan",
|
||||
description: "Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert.",
|
||||
image: { src: speaker1, alt: "Liam O'Connor" },
|
||||
name: "Liam O'Connor",
|
||||
role: "Lead Product Designer",
|
||||
company: "Spotify",
|
||||
description:
|
||||
"Liam gibt Einblicke, wie Spotify Personalisierung nutzt, ohne die Privatsphäre der Nutzer zu verletzen.",
|
||||
category: "AI & Future",
|
||||
talks: [{ title: "Talk: Trust in AI UX", type: "Talk" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg", alt: "Dr. Elena Rossi" },
|
||||
name: "Dr. Elena Rossi",
|
||||
jobTitle: "Cognitive Psychologist · University of Milan",
|
||||
description: "Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert.",
|
||||
image: { src: speaker2, alt: "Fabienne Keller" },
|
||||
name: "Fabienne Keller",
|
||||
role: "Gründerin",
|
||||
company: "User-First Agency",
|
||||
description:
|
||||
"Fabienne ist Expertin für User Research in komplexen B2B-Umfeldern und wie man Stakeholder von Test-Ergebnissen überzeugt.",
|
||||
category: "Research",
|
||||
talks: [{ title: "Workshop: Research Repositories", type: "Workshop" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg", alt: "Dr. Elena Rossi" },
|
||||
name: "Dr. Elena Rossi",
|
||||
jobTitle: "Cognitive Psychologist · University of Milan",
|
||||
description: "Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert.",
|
||||
image: { src: speaker3, alt: "Thomas Meyer" },
|
||||
name: 'Thomas "Tom" Meyer',
|
||||
role: "Creative Director",
|
||||
company: "Swisscom",
|
||||
description:
|
||||
"Tom zeigt, wie man in großen Konzernen eine Design-Kultur etabliert, die über das visuelle Layer hinausgeht.",
|
||||
category: "Strategie",
|
||||
talks: [{ title: "Networking: Leading Teams", type: "Networking" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
{
|
||||
image: { src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg", alt: "Dr. Elena Rossi" },
|
||||
name: "Dr. Elena Rossi",
|
||||
jobTitle: "Cognitive Psychologist · University of Milan",
|
||||
description: "Elena verbindet Wissenschaft mit Design. Sie erklärt, wie unser Gehirn auf Micro-Interactions reagiert.",
|
||||
image: { src: speaker4, alt: "Sarah M. Widmer" },
|
||||
name: "Sarah M. Widmer",
|
||||
role: "Senior UX Architect",
|
||||
company: "SBB",
|
||||
description:
|
||||
"Sarah gestaltet die Mobilität von morgen. Sie zeigt, wie man Millionen von Nutzern barrierefrei durch den digitalen öV-Dschungel leitet.",
|
||||
category: "Design / UX",
|
||||
talks: [{ title: "Talk: Inclusive Design at Scale", type: "Talk" }],
|
||||
socialLinks: [{ href: "#", icon: <BiLogoLinkedinSquare className="size-6" /> }],
|
||||
},
|
||||
],
|
||||
footerContent: {
|
||||
heading: "",
|
||||
description: "",
|
||||
button: { title: "", variant: "secondary" },
|
||||
},
|
||||
};
|
||||
|
||||
export default Team4;
|
||||
|
||||
@ -1,17 +1,88 @@
|
||||
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 type { ProgramEvent } from "../components/Event33";
|
||||
import { Banner15 } from "../components/Banner15";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
|
||||
import spk1 from "../assets/speakers/speaker1.jpg";
|
||||
import spk2 from "../assets/speakers/speaker2.jpg";
|
||||
import spk3 from "../assets/speakers/speaker3.jpg";
|
||||
import spk4 from "../assets/speakers/speaker4.jpg";
|
||||
|
||||
const ALL_EVENTS: ProgramEvent[] = [
|
||||
// Donnerstag
|
||||
{ id: "do-1", time: "10:00 – 11:30 Uhr", image: { src: spk1, alt: "Jens Riegelsberger" }, title: "Opening Keynote: The Future of UX", speaker: "Jens Riegelsberger", type: "Talk", level: "Senior", day: "Donnerstag", speakerUrl: "/speaker" },
|
||||
{ id: "do-2", time: "12:00 – 13:00 Uhr", image: { src: spk2, alt: "Marcus J. Low" }, title: "Workshop: Design Systems at Scale", speaker: "Marcus J. Low", type: "Workshop", level: "Mid-Level", day: "Donnerstag", speakerUrl: "/speaker" },
|
||||
{ id: "do-3", time: "14:00 – 15:30 Uhr", image: { src: spk3, alt: "Reto Gwerder" }, title: "Interaction: Prototyping Fast", speaker: "Reto Gwerder", type: "Interaction", level: "Junior", day: "Donnerstag", speakerUrl: "/speaker" },
|
||||
{ id: "do-4", time: "16:00 – 17:30 Uhr", image: { src: spk4, alt: "Dr. Elena Rossi" }, title: "AI and Future: Intelligence in Design", speaker: "Dr. Elena Rossi", type: "AI and Future", level: "Senior", day: "Donnerstag", speakerUrl: "/speaker" },
|
||||
{ id: "do-5", time: "18:00 – 19:30 Uhr", image: { src: spk1, alt: "Liam O'Connor" }, title: "Talk: Ethical AI", speaker: "Liam O'Connor", type: "Talk", level: "Mid-Level", day: "Donnerstag", speakerUrl: "/speaker" },
|
||||
// Freitag
|
||||
{ id: "fr-1", time: "12:00 – 13:30 Uhr", image: { src: spk1, alt: "Jens Riegelsberger" }, title: "Scaling Research", speaker: "Jens Riegelsberger", type: "Talk", level: "Senior", day: "Freitag", speakerUrl: "/speaker" },
|
||||
{ id: "fr-2", time: "12:00 – 13:00 Uhr", image: { src: spk2, alt: "Marcus J. Low" }, title: "Workshop: The Future of Tokens", speaker: "Marcus J. Low", type: "Workshop", level: "Mid-Level", day: "Freitag", speakerUrl: "/speaker" },
|
||||
{ id: "fr-3", time: "14:00 – 15:30 Uhr", image: { src: spk3, alt: "Reto Gwerder" }, title: "Talk: Simplify or Die", speaker: "Reto Gwerder", type: "Talk", level: "Junior", day: "Freitag", speakerUrl: "/speaker" },
|
||||
{ id: "fr-4", time: "16:00 – 17:30 Uhr", image: { src: spk4, alt: "Dr. Elena Rossi" }, title: "Deep Dive: Psychological UX", speaker: "Dr. Elena Rossi", type: "Talk", level: "Senior", day: "Freitag", speakerUrl: "/speaker" },
|
||||
{ id: "fr-5", time: "18:00 – 19:30 Uhr", image: { src: spk1, alt: "Liam O'Connor" }, title: "Talk: Trust in AI", speaker: "Liam O'Connor", type: "Talk", level: "Mid-Level", day: "Freitag", speakerUrl: "/speaker" },
|
||||
{ id: "fr-6", time: "20:00 – 21:30 Uhr", image: { src: spk2, alt: "Fabienne Keller" }, title: "Workshop: Research Repositories", speaker: "Fabienne Keller", type: "Workshop", level: "Senior", day: "Freitag", speakerUrl: "/speaker" },
|
||||
];
|
||||
|
||||
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 />
|
||||
<Event33 />
|
||||
<Filters5
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
activeDay={activeDay}
|
||||
onDayChange={setActiveDay}
|
||||
activeTags={activeTags}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
<Event33 events={filteredEvents} />
|
||||
<Banner15 />
|
||||
<Footer3 />
|
||||
</div>
|
||||
|
||||
@ -1,26 +1,76 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Navbar3 } from "../components/Navbar";
|
||||
import { Header23 } from "../components/Header23";
|
||||
import { Filters5 } from "../components/Filters5";
|
||||
import { Team4 } from "../components/Team4";
|
||||
import { Team4Defaults } from "../components/Team4";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
|
||||
const Programm = () => {
|
||||
const SPEAKER_TABS = [
|
||||
{ value: "all", label: "Alle ansehen" },
|
||||
{ value: "Strategie", label: "Strategie" },
|
||||
{ value: "Research", label: "Research" },
|
||||
{ value: "Design / UX", label: "Design / UX" },
|
||||
{ value: "AI & Future", label: "AI & Future" },
|
||||
{ value: "Psychologie", label: "Psychologie" },
|
||||
];
|
||||
|
||||
const ALL_SPEAKERS = Team4Defaults.teamMembers;
|
||||
|
||||
const Speaker = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const filteredSpeakers = useMemo(() => {
|
||||
return ALL_SPEAKERS.filter((s) => {
|
||||
if (activeTab !== "all" && s.category !== activeTab) return false;
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
if (
|
||||
!s.name.toLowerCase().includes(q) &&
|
||||
!s.role.toLowerCase().includes(q) &&
|
||||
!s.company.toLowerCase().includes(q)
|
||||
)
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [activeTab, searchQuery]);
|
||||
|
||||
const activeTags = [
|
||||
searchQuery ? { label: searchQuery, onRemove: () => setSearchQuery("") } : null,
|
||||
activeTab !== "all" ? { label: activeTab, onRemove: () => setActiveTab("all") } : null,
|
||||
].filter(Boolean) as { label: string; onRemove: () => void }[];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar3 />
|
||||
<Header23
|
||||
heading="Unsere Speaker"
|
||||
description="Erfahre von den klügsten Köpfen der Branche, wie sie komplexe Design-Herausforderungen meistern."
|
||||
description="Erfahre von den klügsten Köpfen der Branche, wie sie komplexe Design-Herausforderungen meistern. Von Schweizer Präzision im Interface bis hin zu globalen Strategien führender Tech-Giganten – unsere Speaker bringen handfeste Insights statt nur Buzzwords."
|
||||
buttons={[
|
||||
{ title: "Zu den Speakern", variant: "primary" },
|
||||
{ title: "Zum Programm", variant: "secondary" },
|
||||
]}
|
||||
/>
|
||||
<Filters5 />
|
||||
<Team4 />
|
||||
<Filters5
|
||||
tabs={SPEAKER_TABS}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
searchLabel="Stichwortsuche"
|
||||
resetLabel="Löschen"
|
||||
activeTags={activeTags}
|
||||
onReset={() => { setSearchQuery(""); setActiveTab("all"); }}
|
||||
useFilterToggle={false}
|
||||
showDayFilter={false}
|
||||
showSortButton={false}
|
||||
/>
|
||||
<Team4 teamMembers={filteredSpeakers} />
|
||||
<Footer3 />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Programm;
|
||||
export default Speaker;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user