fix/design home page

src/app/(main)/(home)/components/event-calendar/index.tsx

+"use client";
+import React, { useState } from "react";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+export default function EventCalendar() {
+  const mockCalendar = {
+    month: 10,
+    year: 2025,
+    highlighted: [6, 9, 12],
+  };
+  const [month, setMonth] = useState<number>(mockCalendar.month);
+  const [year, setYear] = useState<number>(mockCalendar.year);
+
+  return (
+    <div className="bg-white border rounded-md p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-medium">
+          THÁNG {month}/{year}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="group">
+            <button
+              aria-label="Tháng trước"
+              onClick={() => {
+                // prev month
+                if (month === 1) {
+                  setMonth(12);
+                  setYear((y) => y - 1);
+                } else {
+                  setMonth((m) => m - 1);
+                }
+              }}
+              className="group-hover:border-primary p-1 h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636] "
+            >
+              <ArrowLeft
+                size={24}
+                className="group-hover:text-muted-foreground text-[#363636]"
+              />
+            </button>
+          </div>
+          <div className="group">
+            <button
+              aria-label="Tháng sau"
+              onClick={() => {
+                // next month
+                if (month === 12) {
+                  setMonth(1);
+                  setYear((y) => y + 1);
+                } else {
+                  setMonth((m) => m + 1);
+                }
+              }}
+              className="p-1 group-hover:border-primary h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636]"
+            >
+              <ArrowRight
+                size={24}
+                className="group-hover:text-muted-foreground"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-xs">
+        {["CN", "T2", "T3", "T4", "T5", "T6", "T7"].map((d) => (
+          <div key={d} className="text-gray-400 py-1">
+            {d}
+          </div>
+        ))}
+        {
+          (() => {
+            const totalDays = new Date(year, month, 0).getDate()
+            const firstDayIndex = new Date(year, month - 1, 1).getDay() // 0 (Sun) - 6 (Sat)
+            // previous month total days
+            const prevMonthTotalDays = new Date(year, month - 1, 0).getDate()
+            const totalCells = firstDayIndex + totalDays
+            const trailingCount = (7 - (totalCells % 7)) % 7
+
+            return (
+              <>
+                {Array.from({ length: firstDayIndex }).map((_, i) => {
+                  const dayNum = prevMonthTotalDays - (firstDayIndex - 1) + i
+                  return (
+                    <div key={`prev-${i}`} className="py-2 text-sm text-gray-300">
+                      {dayNum}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
+                  const isHighlighted = mockCalendar.highlighted.includes(day)
+                  return (
+                    <div
+                      key={day}
+                      className={`py-2 rounded-full w-10 h-10 flex flex-col justify-center items-center text-sm ${isHighlighted ? 'bg-yellow-500 text-white' : 'text-gray-700'
+                        }`}
+                    >
+                      {day}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: trailingCount }).map((_, i) => (
+                  <div key={`next-${i}`} className="py-2 text-sm text-gray-300">
+                    {i + 1}
+                  </div>
+                ))}
+              </>
+            )
+          })()
+        }
+      </div>
+    </div>
+  );
+}