mirror of
https://github.com/Ichitux/lambada-fiesta-live.git
synced 2026-05-15 15:12:19 +02:00
215 lines
9.1 KiB
TypeScript
215 lines
9.1 KiB
TypeScript
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { STAFF } from "@/data/event-data";
|
|
import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
/** Colores de badge por rol */
|
|
const roleBadgeClass: Record<string, string> = {
|
|
Instructor: "bg-primary text-primary-foreground",
|
|
DJ: "bg-secondary text-secondary-foreground",
|
|
Organizador: "bg-accent text-accent-foreground",
|
|
};
|
|
|
|
const StaffSection = () => {
|
|
const { t } = useTranslation();
|
|
const [filter, setFilter] = useState<"all" | "instructors" | "djs">("all");
|
|
|
|
const filteredStaff = STAFF.filter((member) => {
|
|
if (filter === "all") return true;
|
|
if (filter === "instructors") return member.role === "Instructor";
|
|
if (filter === "djs") return member.role === "DJ";
|
|
return true;
|
|
});
|
|
// simple ref + helpers for horizontal scroll
|
|
const onPrev = () => {
|
|
const scroller = document.getElementById("staff-scroller");
|
|
if (!scroller) return;
|
|
const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
|
|
const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
|
|
scroller.scrollBy({ left: -delta, behavior: "smooth" });
|
|
};
|
|
const onNext = () => {
|
|
const scroller = document.getElementById("staff-scroller");
|
|
if (!scroller) return;
|
|
const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
|
|
const delta = card ? card.offsetWidth + 24 : 320;
|
|
scroller.scrollBy({ left: delta, behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="staff"
|
|
className="section-padding bg-background relative z-10 -mt-[40px] pt-[120px]"
|
|
style={{ borderRadius: "50% 50% 0 0 / 80px 80px 0 0" }}
|
|
>
|
|
<div className="container mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: false, amount: 0.15 }}
|
|
className="flex items-end justify-between gap-4 mb-6 md:mb-8"
|
|
>
|
|
<div className="text-center md:text-left w-full">
|
|
<h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
|
|
{t("staff.title")}
|
|
</h2>
|
|
<p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
|
|
{t("staff.description")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Arrows (desktop) */}
|
|
<div className="hidden md:flex items-center gap-2 shrink-0">
|
|
<button
|
|
aria-label="Anterior"
|
|
onClick={onPrev}
|
|
className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
aria-label="Siguiente"
|
|
onClick={onNext}
|
|
className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
|
|
>
|
|
<ChevronRight className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Filters */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: false, amount: 0.15 }}
|
|
className="flex flex-wrap gap-3 mb-8 justify-center md:justify-start"
|
|
>
|
|
{(
|
|
[
|
|
{ id: "all", labelKey: "staff.filters.all" },
|
|
{ id: "instructors", labelKey: "staff.filters.instructors" },
|
|
{ id: "djs", labelKey: "staff.filters.djs" },
|
|
] as const
|
|
).map(({ id, labelKey }) => (
|
|
<button
|
|
key={id}
|
|
onClick={() => setFilter(id)}
|
|
className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
|
|
filter === id
|
|
? "bg-primary text-primary-foreground border-primary shadow-md"
|
|
: "bg-card text-foreground border-border hover:border-primary/50"
|
|
}`}
|
|
>
|
|
{t(labelKey)}
|
|
</button>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Carousel scroller */}
|
|
<div className="relative">
|
|
{/* gradient edges */}
|
|
<div className="hidden md:block pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl z-20" />
|
|
<div className="hidden md:block pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl z-20" />
|
|
|
|
<div
|
|
id="staff-scroller"
|
|
className="flex gap-6 overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth pb-8 pt-6 -mx-4 px-4 md:mx-0 md:px-0 min-h-[400px]"
|
|
>
|
|
<AnimatePresence mode="popLayout">
|
|
{filteredStaff.map((member, i) => (
|
|
<motion.div
|
|
key={member.id}
|
|
layout
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
transition={{ duration: 0.3, delay: i * 0.05 }}
|
|
data-staff-card
|
|
className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
|
|
>
|
|
{/* Foto */}
|
|
<div className="bg-muted flex items-center justify-center overflow-hidden w-full aspect-[4/5]">
|
|
{member.image ? (
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500 bg-muted"
|
|
/>
|
|
) : (
|
|
<User className="w-16 h-16 text-muted-foreground/40" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
{/* Badge de rol */}
|
|
<span
|
|
className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
|
|
roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
|
|
}`}
|
|
>
|
|
{(() => {
|
|
const roleLabelKey =
|
|
member.role === "Instructor"
|
|
? "instructor"
|
|
: member.role === "DJ"
|
|
? "dj"
|
|
: member.role === "Organizador"
|
|
? "organizer"
|
|
: undefined;
|
|
return roleLabelKey ? t(`staff.${roleLabelKey}`) : member.role;
|
|
})()}
|
|
</span>
|
|
|
|
<h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
|
|
{member.name}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{member.description?.trim().startsWith("[") && member.description?.trim().endsWith("]")
|
|
? t("staff.placeholder")
|
|
: member.description}
|
|
</p>
|
|
|
|
{/* Redes sociales */}
|
|
{member.socials?.instagram && (
|
|
<a
|
|
href={member.socials.instagram}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
|
|
>
|
|
<Instagram className="w-4 h-4" />
|
|
{t("staff.socials.instagram")}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Arrows (mobile overlay) */}
|
|
<div className="md:hidden absolute inset-y-1/2 -translate-y-1/2 left-1 right-1 flex items-center justify-between pointer-events-none">
|
|
<button
|
|
aria-label="Anterior"
|
|
onClick={onPrev}
|
|
className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
aria-label="Siguiente"
|
|
onClick={onNext}
|
|
className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
|
|
>
|
|
<ChevronRight className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default StaffSection;
|