rewrite phase 5

2026-05-09 15:34:57 +02:00
parent edeb8ef8e3
commit b1c3cb99bd
8 changed files with 362 additions and 21 deletions
@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import { Event } from "../../types";
+
+interface DayEventsProps {
+  date: Date;
+  events: Event[];
+  loading: boolean;
+  error: string | null;
+}
+
+const DayEvents: React.FC<DayEventsProps> = ({ date, events, loading, error }) => {
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("en-US", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
+        </div>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="animate-pulse flex space-x-4">
+              <div className="flex-1 space-y-2 py-1">
+                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+                <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded"></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
+        </div>
+        <div className="text-red-500 dark:text-red-400 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">Error: {error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
+      </div>
+
+      {events.length === 0 ? (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+          <p>No events scheduled for this day</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {events.map((event) => {
+            // Format time for display
+            const eventTime = new Date(event.eventTime);
+            const timeString = eventTime.toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+            });
+
+            return (
+              <div
+                key={event.id}
+                className="p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-shadow"
+              >
+                <div className="flex justify-between items-start">
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-white">{event.title}</h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                      {timeString} • {event.destination}
+                    </p>
+                  </div>
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100">
+                    {event.source === "calendar" ? "Calendar" : "Manual"}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DayEvents;