feat: enhance Scheme component to handle schedule data and improve venue/date selection
This commit is contained in:
+77
-34
@@ -1,7 +1,19 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { fluxgore, gothampro } from "@/utils/fonts";
|
||||
import Button from "./Button";
|
||||
import { ReactNode, useState } from "react";
|
||||
import { ReactNode, useState, useMemo } from "react";
|
||||
|
||||
interface ScheduleData {
|
||||
date: string;
|
||||
location: string;
|
||||
start: string;
|
||||
stop: string;
|
||||
activity: string;
|
||||
}
|
||||
|
||||
interface SchemeProps {
|
||||
scheduleData?: ScheduleData[];
|
||||
}
|
||||
|
||||
interface SchemeSelectProps {
|
||||
children: ReactNode;
|
||||
@@ -16,7 +28,8 @@ function SchemeSelect({
|
||||
}: SchemeSelectProps) {
|
||||
const baseClasses = `${fluxgore.className} leading-none cursor-pointer transition-all duration-300 ease-in-out hover:opacity-80 transform hover:scale-105 uppercase`;
|
||||
const activeClasses = "text-[#1E1E1E] text-2xl md:text-4xl";
|
||||
const inactiveClasses = "text-[#0D0D0D] text-base md:text-xl opacity-50 self-end";
|
||||
const inactiveClasses =
|
||||
"text-[#0D0D0D] text-base md:text-xl opacity-50 self-end";
|
||||
|
||||
return (
|
||||
<p
|
||||
@@ -50,18 +63,51 @@ function SchemeItem({ time, title }: SchemeItemProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function Scheme() {
|
||||
const [activeVenue, setActiveVenue] = useState("главная площадка");
|
||||
|
||||
function Scheme({ scheduleData = [] }: SchemeProps) {
|
||||
// Extract unique dates and venues from schedule data
|
||||
const { uniqueDates, uniqueVenues } = useMemo(() => {
|
||||
const dates = [...new Set(scheduleData.map((item) => item.date))];
|
||||
const venues = [
|
||||
{ name: "главная площадка" },
|
||||
{ name: "мотокросс" },
|
||||
{ name: "картинг" },
|
||||
{ name: "Детская площадка" },
|
||||
{ name: "выставка" },
|
||||
{ name: "мфт" },
|
||||
...new Set(scheduleData.map((item) => item.location.toLowerCase())),
|
||||
];
|
||||
|
||||
return {
|
||||
uniqueDates: dates,
|
||||
uniqueVenues: venues.length > 0 ? venues : ["главная площадка"],
|
||||
};
|
||||
}, [scheduleData]);
|
||||
|
||||
const [activeVenue, setActiveVenue] = useState(
|
||||
uniqueVenues[0] || "главная площадка"
|
||||
);
|
||||
const [activeDate, setActiveDate] = useState(uniqueDates[0] || "5 сентября");
|
||||
|
||||
// Filter schedule items based on active venue and date
|
||||
const filteredSchedule = useMemo(() => {
|
||||
return scheduleData.filter(
|
||||
(item) =>
|
||||
item.location.toLowerCase() === activeVenue && item.date === activeDate
|
||||
);
|
||||
}, [scheduleData, activeVenue, activeDate]);
|
||||
|
||||
// Fallback data if no schedule provided
|
||||
const fallbackSchedule = [
|
||||
{ start: "10:00", stop: "10:30", activity: "Открытие фестиваля" },
|
||||
{ start: "10:30", stop: "11:00", activity: "Приветственная речь" },
|
||||
{ start: "11:00", stop: "12:00", activity: "Основная программа" },
|
||||
];
|
||||
|
||||
const displaySchedule =
|
||||
filteredSchedule.length > 0
|
||||
? filteredSchedule.map((item) => ({
|
||||
time: `${item.start}-${item.stop}`,
|
||||
title: item.activity,
|
||||
}))
|
||||
: fallbackSchedule.map((item) => ({
|
||||
time: `${item.start}-${item.stop}`,
|
||||
title: item.activity,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="bg-[#F4F4F4] relative pt-10 md:pt-20 pb-16 md:pb-32 px-4 md:px-0">
|
||||
<div className="container mx-auto">
|
||||
@@ -85,41 +131,38 @@ function Scheme() {
|
||||
className="mt-10 md:mt-20 w-full h-auto"
|
||||
/>
|
||||
|
||||
{/* Date Selection */}
|
||||
<div className="flex flex-col md:flex-row mt-10 md:mt-40 space-y-3 md:space-y-0 md:space-x-5 items-center justify-center">
|
||||
<Button shadowEnabled={false} variant="blue">
|
||||
5 сентября
|
||||
</Button>
|
||||
<Button shadowEnabled={false} variant="blue_alt">
|
||||
5 сентября
|
||||
</Button>
|
||||
<Button shadowEnabled={false} variant="blue_alt">
|
||||
5 сентября
|
||||
{uniqueDates.map((date) => (
|
||||
<Button
|
||||
key={date}
|
||||
shadowEnabled={false}
|
||||
variant={date === activeDate ? "blue" : "blue_alt"}
|
||||
onClick={() => setActiveDate(date)}
|
||||
>
|
||||
{date}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Venue Selection */}
|
||||
<div className="flex flex-wrap md:flex-row mt-8 md:mt-14 gap-3 md:gap-0 md:space-x-12 justify-center min-h-10">
|
||||
{venues.map((venue) => (
|
||||
{uniqueVenues.map((venue) => (
|
||||
<SchemeSelect
|
||||
key={venue.name}
|
||||
active={venue.name === activeVenue}
|
||||
onClick={() => setActiveVenue(venue.name)}
|
||||
key={venue}
|
||||
active={venue === activeVenue}
|
||||
onClick={() => setActiveVenue(venue)}
|
||||
>
|
||||
{venue.name}
|
||||
{venue}
|
||||
</SchemeSelect>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Schedule Display */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-10 md:mt-20 max-w-4xl mx-auto">
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
<SchemeItem time="10:00-10:30" title="Открытие фестиваля" />
|
||||
{displaySchedule.map((item, index) => (
|
||||
<SchemeItem key={index} time={item.time} title={item.title} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+48
-2
@@ -10,11 +10,57 @@ import Partners from "@/components/Partners";
|
||||
import Scheme from "@/components/Scheme";
|
||||
import Video from "@/components/Video";
|
||||
import Head from "next/head";
|
||||
import { act } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const csvData = [
|
||||
{
|
||||
date: "5 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "10:00",
|
||||
stop: "10:30",
|
||||
activity: "Репетиция шоу",
|
||||
},
|
||||
{
|
||||
date: "5 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "11:00",
|
||||
stop: "11:30",
|
||||
activity: "Открытие фестиваля",
|
||||
},
|
||||
{
|
||||
date: "5 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "12:00",
|
||||
stop: "13:00",
|
||||
activity: "Показательные выступления",
|
||||
},
|
||||
{
|
||||
date: "6 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "10:00",
|
||||
stop: "10:30",
|
||||
activity: "Репетиция шоу",
|
||||
},
|
||||
{
|
||||
date: "6 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "10:00",
|
||||
stop: "10:30",
|
||||
activity: "Репетиция шоу",
|
||||
},
|
||||
{
|
||||
date: "6 сентября",
|
||||
location: "ГЛАВНАЯ ПЛОЩАДКА",
|
||||
start: "10:00",
|
||||
stop: "10:30",
|
||||
activity: "Репетиция шоу",
|
||||
},
|
||||
// ... more data
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Head>
|
||||
<title>Фестиваль технических видов спорта</title>
|
||||
</Head>
|
||||
@@ -23,7 +69,7 @@ export default function Home() {
|
||||
<Cover />
|
||||
<Info />
|
||||
<Video />
|
||||
{/* <Scheme /> */}
|
||||
<Scheme scheduleData={csvData} />
|
||||
<Events />
|
||||
<Activities />
|
||||
<Partners />
|
||||
|
||||
Reference in New Issue
Block a user