modamo.xyz
+23
-4
app/page.tsx
+23
-4
app/page.tsx
···
1
1
"use client";
2
2
3
+
import { useState } from "react";
4
+
3
5
const Home = () => {
6
+
const [expandedDay, setExpandedDay] = useState(0);
7
+
4
8
return (
5
-
<div className="bg-[#0F0F23] gap-2 grid grid-cols-4 grid-rows-3 h-screen p-2 w-screen">
9
+
<div
10
+
className={`bg-[#0F0F23] gap-2 grid grid-cols-4 ${
11
+
expandedDay ? "grid-rows-4" : "grid-rows-3"
12
+
} h-screen p-2 w-screen`}
13
+
>
6
14
{Array.from({ length: 12 }).map((_, index) => (
7
15
<div
8
-
className="border-2 border-[#0B4517] col-span-1 flex items-center justify-center rounded-2xl row-span-1 "
9
-
key={index}
16
+
className={`border-2 border-[#0B4517] ${
17
+
expandedDay === index + 1 ? "col-span-2" : "col-span-1"
18
+
} flex items-center justify-center rounded-2xl ${
19
+
expandedDay === index + 1 ? "row-span-2" : "row-span-1"
20
+
}`}
21
+
key={index + 1}
22
+
onClick={() =>
23
+
setExpandedDay((p) => {
24
+
console.log(p === index + 1 ? 0 : index + 1);
25
+
26
+
return p === index + 1 ? 0 : index + 1;
27
+
})
28
+
}
10
29
>
11
30
<p className="text-center text-4xl text-[#0B4517]">
12
-
{index}
31
+
{index + 1}
13
32
</p>
14
33
</div>
15
34
))}