86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
"use client";
|
|
import { events } from "@/lib/events";
|
|
import { LinkIcon } from "lucide-react";
|
|
import { useEffect, useState, useRef } from "react";
|
|
|
|
export default function TimelineComponent() {
|
|
const [selectedYear, setSelectedYear] = useState<number | null>(null);
|
|
|
|
const years = Array.from(
|
|
new Set(events.map((event) => new Date(event.date).getFullYear()))
|
|
).sort((a, b) => b - a);
|
|
|
|
useEffect(() => {
|
|
if (years.length > 0 && selectedYear === null) {
|
|
setSelectedYear(years[0]);
|
|
}
|
|
}, [years, selectedYear]);
|
|
|
|
const filteredEvents = selectedYear
|
|
? events.filter(
|
|
(event) => new Date(event.date).getFullYear() === selectedYear
|
|
)
|
|
: [];
|
|
|
|
return (
|
|
<div
|
|
id="timeline"
|
|
className="w-full md:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
|
|
>
|
|
<div className="w-full">
|
|
<h1 className="text-2xl font-bold mb-4 w-full">🌠 수상 및 교육</h1>
|
|
<br />
|
|
<div className="flex flex-col md:flex-row gap-4 h-full">
|
|
{/* Left column - Year buttons */}
|
|
<div className="w-full md:w-24 flex flex-row md:flex-col gap-2 overflow-y-auto pr-2">
|
|
{years.map((year) => (
|
|
<button
|
|
key={year}
|
|
onClick={() => setSelectedYear(year)}
|
|
className={`px-4 py-2 rounded-lg font-semibold transition-all text-sm ${
|
|
selectedYear === year
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-background border border-border hover:bg-muted"
|
|
}`}
|
|
>
|
|
{year}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right column - Events */}
|
|
<div className="flex-1 overflow-y-auto pr-2">
|
|
<div className="space-y-2">
|
|
{filteredEvents.map((event, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-lg border bg-background px-4 py-3"
|
|
>
|
|
<div className="flex flex-row gap-2 mb-1">
|
|
<span className="text-md font-semibold fixed-width-number">
|
|
{new Date(event.date).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "2-digit",
|
|
})}
|
|
</span>
|
|
<span className="text-md font-semibold fixed-width-number text-muted-foreground">
|
|
ㆍ{event.category}
|
|
</span>
|
|
</div>
|
|
{event.link ? (
|
|
<a href={event.link} className="">
|
|
{event.description}{" "}
|
|
<LinkIcon className="inline-block w-4 h-4 mb-1 ml-1" />
|
|
</a>
|
|
) : (
|
|
<span>{event.description}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|