implementted the EventCard and updated the main page.tsx

Author: Juliankser

nextjs-calendar/src/app/components/CalendarGrid.tsx

@@ -0,0 +1,36 @@
+// src/app/components/CalendarGrid.tsx
+"use client";
+import React from "react";
+import { format, startOfMonth, endOfMonth, addDays } from "date-fns";
+import EventCard from "./EventCard";
+
+interface CalendarGridProps {
+  currentDate: Date;
+}
+
+export default function CalendarGrid({ currentDate }: CalendarGridProps) {
+  const start = startOfMonth(currentDate);
+  const end = endOfMonth(currentDate);
+
+  const days = [];
+  for (let day = start; day <= end; day = addDays(day, 1)) {
+    days.push(
+      <div
+        key={day.toString()}
+        className="flex flex-col items-center justify-center p-4 border border-gray-300 rounded-lg bg-white shadow-sm hover:shadow-lg transition-all duration-200"
+      >
+        <div className="text-lg font-medium text-gray-800">{format(day, "d")}</div>
+        {/* Event cards will be displayed here */}
+        <div className="mt-2 text-sm text-gray-600">
+          <EventCard event={{ id: "1", title: "Sample Event", date: day.toISOString() }} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-7 gap-4 w-full max-w-2xl mt-6">
+      {days}
+    </div>
+  );
+}

nextjs-calendar/src/app/components/EventCard.tsx

@@ -0,0 +1,22 @@
+// src/app/components/EventCard.tsx
+import React from "react";
+
+interface Event {
+  id: string;
+  title: string;
+  date: string;
+  description?: string;
+}
+
+interface EventCardProps {
+  event: Event;
+}
+
+export default function EventCard({ event }: EventCardProps) {
+  return (
+    <div className="p-2 bg-blue-100 rounded-md shadow-md">
+      <h3 className="text-sm font-semibold text-blue-800">{event.title}</h3>
+      <p className="text-xs text-gray-700">{event.description || "No description"}</p>
+    </div>
+  );
+}

nextjs-calendar/src/app/components/EventForm.tsx

@@ -1,29 +1,23 @@
+// src/app/page.tsx
 "use client";
 import React, { useState } from "react";
-import { format, startOfMonth, endOfMonth, addMonths, subMonths, addDays } from "date-fns";
+import { format, addMonths, subMonths } from "date-fns";
+import CalendarGrid from "./components/CalendarGrid";
 
 export default function CalendarPage() {
-  // State for the current date
   const [currentDate, setCurrentDate] = useState(new Date());
 
-  // Functions to navigate months
   const handlePrevMonth = () => setCurrentDate(subMonths(currentDate, 1));
   const handleNextMonth = () => setCurrentDate(addMonths(currentDate, 1));
 
   return (
     <main className="flex flex-col items-center p-6 bg-gray-100 min-h-screen">
       <header className="flex justify-between items-center w-full max-w-2xl mb-8">
-        <button
-          onClick={handlePrevMonth}
-          className="px-4 py-2 text-white bg-blue-600 rounded-md shadow-md hover:bg-blue-700 transition-all duration-300"
-        >
+        <button onClick={handlePrevMonth} className="px-4 py-2 text-white bg-blue-600 rounded-md shadow-md hover:bg-blue-700 transition-all duration-300">
           Previous
         </button>
         <h2 className="text-2xl font-semibold text-gray-800">{format(currentDate, "MMMM yyyy")}</h2>
-        <button
-          onClick={handleNextMonth}
-          className="px-4 py-2 text-white bg-blue-600 rounded-md shadow-md hover:bg-blue-700 transition-all duration-300"
-        >
+        <button onClick={handleNextMonth} className="px-4 py-2 text-white bg-blue-600 rounded-md shadow-md hover:bg-blue-700 transition-all duration-300">
           Next
         </button>
       </header>
@@ -32,30 +26,3 @@ export default function CalendarPage() {
     </main>
   );
 }
-
-function CalendarGrid({ currentDate }: { currentDate: Date }) {
-  const start = startOfMonth(currentDate);
-  const end = endOfMonth(currentDate);
-
-  const days = [];
-  for (let day = start; day <= end; day = addDays(day, 1)) {
-    days.push(
-      <div
-        key={day.toString()}
-        className="flex flex-col items-center justify-center p-4 border border-gray-300 rounded-lg bg-white shadow-sm hover:shadow-lg transition-all duration-200"
-      >
-        <div className="text-lg font-medium text-gray-800">{format(day, "d")}</div>
-        {/* Placeholder for events */}
-        <div className="mt-2 text-sm text-gray-600">
-          <p>Sample Event</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-7 gap-4 w-full max-w-2xl mt-6">
-      {days}
-    </div>
-  );
-}