twelveDaysOfSkeetmas / app / page.tsx

"use client";

import { useState } from "react";

const Home = () => {
	const [expandedDay, setExpandedDay] = useState(0);
	const [days, setDays] = useState(
		Array.from({ length: 12 }).map((_, index) => index + 1)
	);

	return (
		<div
			className={`bg-[#0F0F23] gap-2 grid grid-cols-12 ${
				expandedDay ? "grid-rows-4" : "grid-rows-3"
			} h-screen p-2 w-screen`}
		>
			{days.map((day, index) => (
				<div
					className={`border-2 border-[#0B4517] ${
						expandedDay === day
							? "col-span-6"
							: expandedDay !== 0 && index >= 9
							? "col-span-4"
							: "col-span-3"
					} flex items-center justify-center rounded-2xl ${
						expandedDay === day ? "row-span-2" : "row-span-1"
					}`}
					key={day}
					onClick={() => {
						setExpandedDay((ed) => {
							if (ed === day) {
								setDays((ds) => {
									const sortedDays = [...ds];

									sortedDays.sort((a, b) => a - b);

									return sortedDays;
								});

								return 0;
							} else {
								const daysWithoutDay = days.filter(
									(d) => d !== day
								);
								const reorganizedDays = [
									...daysWithoutDay.slice(0, 5),
									day,
									...daysWithoutDay.slice(5)
								];

								setDays(reorganizedDays);

								return day;
							}
						});
					}}
				>
					<p className="text-center text-4xl text-[#0B4517]">{day}</p>
				</div>
			))}
		</div>
	);
};

export default Home;