diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: OpenDay trainer photos + click-to-bio; remove filter text highlights

Browse Source
This commit is contained in:
Diana Dolgolyova
2026-03-26 13:33:00 +03:00
parent a769ea844d
commit ec08f8e8d5
5 changed files with 92 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@@ -42,7 +42,7 @@ export default function HomePage() {
/> />
<Classes data={content.classes} /> <Classes data={content.classes} />
<Team data={content.team} schedule={content.schedule.locations} /> <Team data={content.team} schedule={content.schedule.locations} />
{openDayData && <OpenDay data={openDayData} popups={content.popups} />} {openDayData && <OpenDay data={openDayData} popups={content.popups} teamMembers={content.team.members} />}
<Schedule data={content.schedule} classItems={content.classes.items} teamMembers={content.team.members} /> <Schedule data={content.schedule} classItems={content.classes.items} teamMembers={content.team.members} />
<Pricing data={content.pricing} /> <Pricing data={content.pricing} />
<MasterClasses data={content.masterClasses} regCounts={mcRegCounts} popups={content.popups} /> <MasterClasses data={content.masterClasses} regCounts={mcRegCounts} popups={content.popups} />

108
src/components/sections/OpenDay.tsx
View File

@@ -1,7 +1,8 @@
"use client"; "use client";
import { useState, useMemo } from "react"; import { useState, useMemo } from "react";
import { Calendar, Sparkles } from "lucide-react"; import Image from "next/image";
import { Calendar, Sparkles, User } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading"; import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal"; import { Reveal } from "@/components/ui/Reveal";
import { SignupModal } from "@/components/ui/SignupModal"; import { SignupModal } from "@/components/ui/SignupModal";
@@ -14,6 +15,7 @@ interface OpenDayProps {
classes: OpenDayClass[]; classes: OpenDayClass[];
}; };
popups?: SiteContent["popups"]; popups?: SiteContent["popups"];
teamMembers?: { name: string; image: string }[];
} }
function formatDateRu(dateStr: string): string { function formatDateRu(dateStr: string): string {
@@ -25,10 +27,20 @@ function formatDateRu(dateStr: string): string {
}); });
} }
export function OpenDay({ data, popups }: OpenDayProps) { export function OpenDay({ data, popups, teamMembers }: OpenDayProps) {
const { event, classes } = data; const { event, classes } = data;
const [signup, setSignup] = useState<{ classId: number; label: string } | null>(null); const [signup, setSignup] = useState<{ classId: number; label: string } | null>(null);
const trainerPhotos = useMemo(() => {
const map: Record<string, string> = {};
if (teamMembers) {
for (const m of teamMembers) {
if (m.image) map[m.name] = m.image;
}
}
return map;
}, [teamMembers]);
// Group classes by hall // Group classes by hall
const hallGroups = useMemo(() => { const hallGroups = useMemo(() => {
const groups: Record<string, OpenDayClass[]> = {}; const groups: Record<string, OpenDayClass[]> = {};
@@ -100,6 +112,7 @@ export function OpenDay({ data, popups }: OpenDayProps) {
cls={cls} cls={cls}
maxParticipants={event.maxParticipants} maxParticipants={event.maxParticipants}
onSignup={setSignup} onSignup={setSignup}
trainerPhoto={trainerPhotos[cls.trainer]}
/> />
))} ))}
</div> </div>
@@ -117,6 +130,7 @@ export function OpenDay({ data, popups }: OpenDayProps) {
key={cls.id} key={cls.id}
cls={cls} cls={cls}
onSignup={setSignup} onSignup={setSignup}
trainerPhoto={trainerPhotos[cls.trainer]}
/> />
))} ))}
</div> </div>
@@ -149,23 +163,26 @@ function ClassCard({
cls, cls,
maxParticipants = 0, maxParticipants = 0,
onSignup, onSignup,
trainerPhoto,
}: { }: {
cls: OpenDayClass; cls: OpenDayClass;
maxParticipants?: number; maxParticipants?: number;
onSignup: (info: { classId: number; label: string }) => void; onSignup: (info: { classId: number; label: string }) => void;
trainerPhoto?: string;
}) { }) {
const label = `${cls.style} · ${cls.trainer} · ${cls.startTime}–${cls.endTime}`; const label = `${cls.style} · ${cls.trainer} · ${cls.startTime}–${cls.endTime}`;
if (cls.cancelled) { if (cls.cancelled) {
return ( return (
<div className="rounded-xl border border-white/5 bg-neutral-900/30 p-4 opacity-50"> <div className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-3 sm:p-4 opacity-50">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-3">
<div> <div className="flex-1 min-w-0 space-y-1">
<span className="text-xs text-neutral-500">{cls.startTime}–{cls.endTime}</span> <span className="rounded-md bg-neutral-800 px-2 py-0.5 text-[11px] font-bold text-neutral-500">
<p className="text-sm text-neutral-500 line-through">{cls.style}</p> {cls.startTime}–{cls.endTime}
<p className="text-xs text-neutral-600">{cls.trainer}</p> </span>
<p className="text-sm text-neutral-500 line-through">{cls.trainer} · {cls.style}</p>
</div> </div>
<span className="text-xs text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5"> <span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2.5 py-0.5 font-medium">
Отменено Отменено
</span> </span>
</div> </div>
@@ -176,24 +193,71 @@ function ClassCard({
const isFull = maxParticipants > 0 && cls.bookingCount >= maxParticipants; const isFull = maxParticipants > 0 && cls.bookingCount >= maxParticipants;
return ( return (
<div className={`rounded-xl border p-4 transition-all ${isFull ? "border-white/5 bg-neutral-900/50" : "border-white/10 bg-neutral-900 hover:border-gold/20"}`}> <div className={`rounded-xl border transition-all ${
<div className="flex items-start justify-between gap-3"> isFull
<div className="flex-1 min-w-0"> ? "border-white/[0.04] bg-white/[0.01]"
<span className="text-xs text-gold font-medium">{cls.startTime}–{cls.endTime}</span> : "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]"
<p className="text-sm font-bold text-white mt-1">{cls.trainer}</p> }`}>
<p className="text-xs text-neutral-400 mt-0.5">{cls.style}</p> <div className="flex items-start gap-3 p-3 sm:p-4">
{maxParticipants > 0 && ( {/* Trainer photo */}
<p className={`text-[10px] mt-1 ${isFull ? "text-amber-400" : "text-neutral-500"}`}> <button
{cls.bookingCount}/{maxParticipants} мест onClick={() => {
</p> window.dispatchEvent(new CustomEvent("openTrainerProfile", { detail: cls.trainer }));
}}
className="relative flex items-center justify-center h-10 w-10 rounded-full overflow-hidden shrink-0 ring-1 ring-white/10 hover:ring-gold/30 transition-all cursor-pointer mt-0.5"
title={`Подробнее о ${cls.trainer}`}
>
{trainerPhoto ? (
<Image src={trainerPhoto} alt={cls.trainer} fill className="object-cover" sizes="40px" />
) : (
<div className="flex items-center justify-center h-full w-full bg-white/[0.06]">
<User size={16} className="text-white/40" />
</div>
)} )}
</button>
<div className="flex-1 min-w-0 space-y-2">
{/* Trainer name — clickable to bio */}
<button
onClick={() => {
window.dispatchEvent(new CustomEvent("openTrainerProfile", { detail: cls.trainer }));
}}
className="text-sm font-semibold text-white/90 hover:text-gold transition-colors cursor-pointer"
>
{cls.trainer}
</button>
{/* Time + style */}
<div className="space-y-1">
<div className="flex items-center gap-2">
<span className="rounded-md bg-gold/10 px-2 py-0.5 text-[11px] font-bold text-gold min-w-[80px] text-center">
{cls.startTime}–{cls.endTime}
</span>
<span className="text-sm font-medium text-white/60">{cls.style}</span>
</div>
</div>
{/* Badges */}
<div className="flex items-center gap-1.5 flex-wrap">
{maxParticipants > 0 && (
<span className={`rounded-full px-2.5 py-0.5 text-[10px] font-semibold ${
isFull
? "bg-amber-500/15 border border-amber-500/25 text-amber-400"
: "bg-white/[0.04] border border-white/[0.08] text-white/45"
}`}>
{cls.bookingCount}/{maxParticipants} мест
</span>
)}
</div>
</div> </div>
{/* Book button */}
<button <button
onClick={() => onSignup({ classId: cls.id, label })} onClick={() => onSignup({ classId: cls.id, label })}
className={`shrink-0 rounded-full px-4 py-2 text-xs font-medium transition-colors cursor-pointer ${ className={`shrink-0 self-center rounded-xl px-4 py-2 text-xs font-semibold transition-all cursor-pointer ${
isFull isFull
? "bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-amber-500/20" ? "bg-amber-500/10 border border-amber-500/25 text-amber-400 hover:bg-amber-500/20 hover:border-amber-500/40"
: "bg-gold/10 border border-gold/20 text-gold hover:bg-gold/20" : "bg-gold/10 border border-gold/25 text-gold hover:bg-gold/20 hover:border-gold/40"
}`} }`}
> >
{isFull ? "Лист ожидания" : "Записаться"} {isFull ? "Лист ожидания" : "Записаться"}

12
src/components/sections/schedule/DayCard.tsx
View File

@@ -47,11 +47,7 @@ function ClassRow({
</div> </div>
<button <button
onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)} onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)}
className={`mt-1.5 flex items-center gap-2 text-sm font-medium cursor-pointer active:opacity-60 ${ className="mt-1.5 flex items-center gap-2 text-sm font-medium cursor-pointer active:opacity-60 text-neutral-800 dark:text-white/80"
filterTrainer === cls.trainer
? "text-gold underline underline-offset-2"
: "text-neutral-800 dark:text-white/80"
}`}
> >
<User size={13} className="shrink-0 text-neutral-400 dark:text-white/30" /> <User size={13} className="shrink-0 text-neutral-400 dark:text-white/30" />
{cls.trainer} {cls.trainer}
@@ -62,11 +58,7 @@ function ClassRow({
className="flex items-center gap-2 cursor-pointer active:opacity-60" className="flex items-center gap-2 cursor-pointer active:opacity-60"
> >
<span className={`h-2 w-2 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} /> <span className={`h-2 w-2 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} />
<span className={`text-xs ${ <span className="text-xs text-neutral-500 dark:text-white/40">{cls.type}</span>
filterTypes.has(cls.type)
? "text-gold underline underline-offset-2"
: "text-neutral-500 dark:text-white/40"
}`}>{cls.type}</span>
</button> </button>
{cls.level && ( {cls.level && (
<span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-0.5 text-[10px] font-semibold text-rose-600 dark:text-rose-400"> <span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-0.5 text-[10px] font-semibold text-rose-600 dark:text-rose-400">

2
src/components/sections/schedule/GroupView.tsx
View File

@@ -230,7 +230,7 @@ export function GroupView({
className="flex items-center gap-2 cursor-pointer" className="flex items-center gap-2 cursor-pointer"
> >
<span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} /> <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} />
<span className={`text-sm font-semibold ${filterTypes.has(type) ? "text-gold underline underline-offset-2" : "text-white/90"}`}>{type}</span> <span className="text-sm font-semibold text-white/90">{type}</span>
</button> </button>
{group.level && ( {group.level && (
<span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-px text-[10px] font-semibold text-rose-400"> <span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-px text-[10px] font-semibold text-rose-400">

4
src/components/sections/schedule/MobileSchedule.tsx
View File

@@ -47,7 +47,7 @@ function ClassRow({
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<button <button
onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)} onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)}
className={`truncate text-sm font-medium text-left active:opacity-60 ${filterTrainer === cls.trainer ? "text-gold underline underline-offset-2" : "text-neutral-800 dark:text-white/80"}`} className="truncate text-sm font-medium text-left active:opacity-60 text-neutral-800 dark:text-white/80"
> >
{cls.trainer} {cls.trainer}
</button> </button>
@@ -73,7 +73,7 @@ function ClassRow({
className={`flex items-center gap-1.5 active:opacity-60 ${filterTypes.has(cls.type) ? "opacity-100" : ""}`} className={`flex items-center gap-1.5 active:opacity-60 ${filterTypes.has(cls.type) ? "opacity-100" : ""}`}
> >
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} /> <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} />
<span className={`text-[11px] ${filterTypes.has(cls.type) ? "text-gold underline underline-offset-2" : "text-neutral-400 dark:text-white/30"}`}>{cls.type}</span> <span className="text-[11px] text-neutral-400 dark:text-white/30">{cls.type}</span>
</button> </button>
{showLocation && cls.locationName && ( {showLocation && cls.locationName && (
<span className="flex items-center gap-0.5 text-[10px] text-neutral-400 dark:text-white/20"> <span className="flex items-center gap-0.5 text-[10px] text-neutral-400 dark:text-white/20">