feat: add master classes section with registration system
- New master classes section on landing page with upcoming events grid - Admin CRUD for master classes (image, slots, trainer, style, cost, location) - User signup modal (name + Instagram required, Telegram optional) - Admin registration management: view, add, edit, delete with quick-contact links - Customizable success message for signup confirmation - Auto-filter past events, Russian date formatting, duration auto-calculation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
224
src/components/sections/MasterClasses.tsx
Normal file
224
src/components/sections/MasterClasses.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import Image from "next/image";
|
||||
import { Calendar, Clock, User, MapPin, Instagram } from "lucide-react";
|
||||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||||
import { Reveal } from "@/components/ui/Reveal";
|
||||
import { MasterClassSignupModal } from "@/components/ui/MasterClassSignupModal";
|
||||
import type { SiteContent, MasterClassItem, MasterClassSlot } from "@/types";
|
||||
|
||||
interface MasterClassesProps {
|
||||
data: SiteContent["masterClasses"];
|
||||
}
|
||||
|
||||
const MONTHS_RU = [
|
||||
"января", "февраля", "марта", "апреля", "мая", "июня",
|
||||
"июля", "августа", "сентября", "октября", "ноября", "декабря",
|
||||
];
|
||||
|
||||
const WEEKDAYS_RU = [
|
||||
"воскресенье", "понедельник", "вторник", "среда",
|
||||
"четверг", "пятница", "суббота",
|
||||
];
|
||||
|
||||
function parseDate(iso: string) {
|
||||
return new Date(iso + "T00:00:00");
|
||||
}
|
||||
|
||||
function formatSlots(slots: MasterClassSlot[]): string {
|
||||
if (slots.length === 0) return "";
|
||||
const sorted = [...slots].sort(
|
||||
(a, b) => parseDate(a.date).getTime() - parseDate(b.date).getTime()
|
||||
);
|
||||
|
||||
const dates = sorted.map((s) => parseDate(s.date)).filter((d) => !isNaN(d.getTime()));
|
||||
if (dates.length === 0) return "";
|
||||
|
||||
// Time part from first slot
|
||||
const timePart = sorted[0].startTime
|
||||
? `, ${sorted[0].startTime}–${sorted[0].endTime}`
|
||||
: "";
|
||||
|
||||
if (dates.length === 1) {
|
||||
const d = dates[0];
|
||||
return `${d.getDate()} ${MONTHS_RU[d.getMonth()]} (${WEEKDAYS_RU[d.getDay()]})${timePart}`;
|
||||
}
|
||||
|
||||
const sameMonth = dates.every((d) => d.getMonth() === dates[0].getMonth());
|
||||
const sameWeekday = dates.every((d) => d.getDay() === dates[0].getDay());
|
||||
|
||||
if (sameMonth) {
|
||||
const days = dates.map((d) => d.getDate()).join(" и ");
|
||||
const weekdayHint = sameWeekday ? ` (${WEEKDAYS_RU[dates[0].getDay()]})` : "";
|
||||
return `${days} ${MONTHS_RU[dates[0].getMonth()]}${weekdayHint}${timePart}`;
|
||||
}
|
||||
|
||||
const parts = dates.map((d) => `${d.getDate()} ${MONTHS_RU[d.getMonth()]}`);
|
||||
return parts.join(", ") + timePart;
|
||||
}
|
||||
|
||||
function calcDuration(slot: MasterClassSlot): string {
|
||||
if (!slot.startTime || !slot.endTime) return "";
|
||||
const [sh, sm] = slot.startTime.split(":").map(Number);
|
||||
const [eh, em] = slot.endTime.split(":").map(Number);
|
||||
const mins = (eh * 60 + em) - (sh * 60 + sm);
|
||||
if (mins <= 0) return "";
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
if (h > 0 && m > 0) return `${h} ч ${m} мин`;
|
||||
if (h > 0) return h === 1 ? "1 час" : h < 5 ? `${h} часа` : `${h} часов`;
|
||||
return `${m} мин`;
|
||||
}
|
||||
|
||||
function isUpcoming(item: MasterClassItem): boolean {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const lastDate = (item.slots ?? [])
|
||||
.map((s) => parseDate(s.date))
|
||||
.reduce((a, b) => (a > b ? a : b), new Date(0));
|
||||
return lastDate >= today;
|
||||
}
|
||||
|
||||
export function MasterClasses({ data }: MasterClassesProps) {
|
||||
const [signupTitle, setSignupTitle] = useState<string | null>(null);
|
||||
|
||||
const upcoming = useMemo(() => {
|
||||
return data.items
|
||||
.filter(isUpcoming)
|
||||
.sort((a, b) => {
|
||||
const aFirst = parseDate(a.slots[0]?.date ?? "");
|
||||
const bFirst = parseDate(b.slots[0]?.date ?? "");
|
||||
return aFirst.getTime() - bFirst.getTime();
|
||||
});
|
||||
}, [data.items]);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="master-classes"
|
||||
className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808] overflow-hidden"
|
||||
>
|
||||
<div className="section-divider absolute top-0 left-0 right-0" />
|
||||
|
||||
<div className="section-container">
|
||||
<Reveal>
|
||||
<SectionHeading centered>{data.title}</SectionHeading>
|
||||
</Reveal>
|
||||
|
||||
{upcoming.length === 0 ? (
|
||||
<Reveal>
|
||||
<div className="mt-10 py-12 text-center">
|
||||
<p className="text-sm text-neutral-500 dark:text-white/40">
|
||||
Следите за анонсами мастер-классов в нашем{" "}
|
||||
<a
|
||||
href="https://instagram.com/blackheartdancehouse/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gold hover:text-gold-light underline underline-offset-2 transition-colors"
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
) : (
|
||||
<Reveal>
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{upcoming.map((item, i) => {
|
||||
const duration = item.slots[0] ? calcDuration(item.slots[0]) : "";
|
||||
const slotsDisplay = formatSlots(item.slots);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="group rounded-2xl border border-neutral-200 bg-white overflow-hidden transition-colors dark:border-white/[0.06] dark:bg-[#0a0a0a]"
|
||||
>
|
||||
{/* Image */}
|
||||
{item.image && (
|
||||
<div className="relative aspect-[16/9] w-full overflow-hidden">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||||
<div className="absolute bottom-3 left-3">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-gold/40 bg-black/60 px-3 py-1 text-xs font-semibold text-gold backdrop-blur-sm">
|
||||
<Calendar size={12} />
|
||||
{slotsDisplay}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-5 space-y-3">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white/90 leading-tight">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
|
||||
<User size={14} className="shrink-0" />
|
||||
<span>{item.trainer}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-gold shrink-0" />
|
||||
<span>{item.style}</span>
|
||||
</div>
|
||||
{duration && (
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
|
||||
<Clock size={14} className="shrink-0" />
|
||||
<span>{duration}</span>
|
||||
</div>
|
||||
)}
|
||||
{item.location && (
|
||||
<div className="flex items-center gap-2 text-sm text-neutral-400 dark:text-white/35">
|
||||
<MapPin size={14} className="shrink-0" />
|
||||
<span>{item.location}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-1">
|
||||
<span className="text-lg font-bold text-neutral-900 dark:text-white/90">
|
||||
{item.cost}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button
|
||||
onClick={() => setSignupTitle(item.title)}
|
||||
className="flex-1 rounded-xl bg-gold py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer"
|
||||
>
|
||||
Записаться
|
||||
</button>
|
||||
{item.instagramUrl && (
|
||||
<button
|
||||
onClick={() => window.open(item.instagramUrl, "_blank", "noopener,noreferrer")}
|
||||
className="flex items-center justify-center gap-1.5 rounded-xl border border-neutral-200 px-4 py-2.5 text-sm text-neutral-500 transition-colors hover:border-gold/30 hover:text-gold dark:border-white/[0.08] dark:text-white/40 dark:hover:text-gold cursor-pointer"
|
||||
>
|
||||
<Instagram size={16} />
|
||||
Подробнее
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<MasterClassSignupModal
|
||||
open={signupTitle !== null}
|
||||
onClose={() => setSignupTitle(null)}
|
||||
masterClassTitle={signupTitle ?? ""}
|
||||
successMessage={data.successMessage}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user