expo and timetable pages

This commit is contained in:
Rene Arumetsa
2026-05-01 19:18:52 +03:00
parent 55709a4338
commit 2c4cde6df8
4 changed files with 45 additions and 1125 deletions

View File

@@ -1,77 +1,27 @@
"use client";
import { useState } from "react";
import { vipnagorgialla } from "@/components/Vipnagorgialla";
import { scheduleData } from "@/data/timetable";
import SectionDivider from "@/components/SectionDivider";
import { useTranslations } from "next-intl";
import { getTranslations, setRequestLocale } from "next-intl/server";
const tabs = Object.keys(scheduleData);
export default function Timetable() {
const [activeTab, setActiveTab] = useState(tabs[0]);
const schedule = scheduleData[activeTab];
const t = useTranslations();
export default async function Timetable({
params,
}: {
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
setRequestLocale(locale);
const t = await getTranslations({ locale });
return (
<div>
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
<h1
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-8`}
>
{t("schedule.title")}
</h1>
{/* Tab menu */}
<div className="flex gap-4 mb-8 flex-wrap">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`${vipnagorgialla.className} cursor-pointer uppercase italic px-4 py-2 text-lg font-semibold ${
activeTab === tab
? "bg-[#00A3E0] text-white"
: "bg-[#007CAB] dark:bg-[#007CAB] text-[#EEE5E5] hover:bg-[#00A3E0] dark:hover:bg-[#007CAB]"
} transition-colors`}
>
{t(`schedule.${tab}`)}
</button>
))}
</div>
{/* Schedule entries */}
<div className="space-y-6">
{schedule.map((item, idx) => (
<div
key={idx}
className="border-l-3 border-[#007CAB] pl-4 flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-5 items-stretch"
>
<div
className={`${vipnagorgialla.className} md:w-[180px] w-30 text-[#00A3E0] text-3xl md:text-4xl font-bold italic flex-shrink-0 flex items-center sm:justify-center`}
>
{item.time}
</div>
<div className="flex-1 flex flex-col justify-center min-w-0 sm:min-h-[120px]">
<div
className={`${vipnagorgialla.className} text-2xl md:text-3xl italic font-bold text-[#2A2C3F] dark:text-[#EEE5E5] text-balance`}
>
{t(item.titleKey)}
</div>
{item.description && (
<div className="text-xl md:text-2xl text-[#938BA1] dark:text-[#938BA1] text-balance">
{item.description}
</div>
)}
<div className="text-xl md:text-2xl text-[#938BA1] dark:text-[#938BA1] text-balance">
{t(item.locationKey)}
</div>
</div>
</div>
))}
</div>
</div>
<SectionDivider />
<div className="bg-[#0E0F19] min-h-screen flex flex-col items-center justify-center">
<h1
className={`${vipnagorgialla.className} font-bold italic text-4xl md:text-5xl text-[#EEE5E5] uppercase mb-4`}
>
{t("schedule.title")}
</h1>
<p
className={`${vipnagorgialla.className} font-bold italic text-5xl md:text-7xl text-[#EEE5E5] uppercase`}
>
{t("schedule.comingSoon")}
</p>
</div>
);
}

File diff suppressed because it is too large Load Diff

View File

@@ -448,6 +448,7 @@
},
"schedule": {
"title": "Schedule",
"comingSoon": "Coming soon",
"day": "Day",
"time": "Time",
"event": "Event",
@@ -517,6 +518,7 @@
},
"expo": {
"title": "Expo Area",
"comingSoon": "Coming soon",
"description": "The TipiLAN expo area hosts companies, additional activities and lectures.",
"areas": {
"bar": "Bar",

View File

@@ -449,6 +449,7 @@
},
"schedule": {
"title": "Ajakava",
"comingSoon": "Tuleb hiljem",
"day": "Päev",
"time": "Aeg",
"event": "Sündmus",
@@ -518,6 +519,7 @@
},
"expo": {
"title": "Messiala",
"comingSoon": "Tuleb hiljem",
"description": "TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.",
"areas": {
"bar": "Baar",