modamo.xyz
this repo has no description
Fill bottom row when day is selected
+40
-14
+40
-14
app/page.tsx
+40
-14
app/page.tsx
···
4
4
5
5
const Home = () => {
6
6
const [expandedDay, setExpandedDay] = useState(0);
7
+
const [days, setDays] = useState(
8
+
Array.from({ length: 12 }).map((_, index) => index + 1)
9
+
);
7
10
8
11
return (
9
12
<div
10
-
className={`bg-[#0F0F23] gap-2 grid grid-cols-4 ${
13
+
className={`bg-[#0F0F23] gap-2 grid grid-cols-12 ${
11
14
expandedDay ? "grid-rows-4" : "grid-rows-3"
12
15
} h-screen p-2 w-screen`}
13
16
>
14
-
{Array.from({ length: 12 }).map((_, index) => (
17
+
{days.map((day, index) => (
15
18
<div
16
19
className={`border-2 border-[#0B4517] ${
17
-
expandedDay === index + 1 ? "col-span-2" : "col-span-1"
20
+
expandedDay === day
21
+
? "col-span-6"
22
+
: expandedDay !== 0 && index >= 9
23
+
? "col-span-4"
24
+
: "col-span-3"
18
25
} flex items-center justify-center rounded-2xl ${
19
-
expandedDay === index + 1 ? "row-span-2" : "row-span-1"
26
+
expandedDay === day ? "row-span-2" : "row-span-1"
20
27
}`}
21
-
key={index + 1}
22
-
onClick={() =>
23
-
setExpandedDay((p) => {
24
-
console.log(p === index + 1 ? 0 : index + 1);
28
+
key={day}
29
+
onClick={() => {
30
+
setExpandedDay((ed) => {
31
+
if (ed === day) {
32
+
setDays((ds) => {
33
+
const sortedDays = [...ds];
25
34
26
-
return p === index + 1 ? 0 : index + 1;
27
-
})
28
-
}
35
+
sortedDays.sort((a, b) => a - b);
36
+
37
+
return sortedDays;
38
+
});
39
+
40
+
return 0;
41
+
} else {
42
+
const daysWithoutDay = days.filter(
43
+
(d) => d !== day
44
+
);
45
+
const reorganizedDays = [
46
+
...daysWithoutDay.slice(0, 5),
47
+
day,
48
+
...daysWithoutDay.slice(5)
49
+
];
50
+
51
+
setDays(reorganizedDays);
52
+
53
+
return day;
54
+
}
55
+
});
56
+
}}
29
57
>
30
-
<p className="text-center text-4xl text-[#0B4517]">
31
-
{index + 1}
32
-
</p>
58
+
<p className="text-center text-4xl text-[#0B4517]">{day}</p>
33
59
</div>
34
60
))}
35
61
</div>