feat: TimeTableコンポーネントを作成

Author: staticWagomU

2025/src/components/Schedule/TimeTable.astro

@@ -0,0 +1,41 @@
+---
+import Card from "../Card.astro";
+import { Clock, User } from "@lucide/astro";
+import { getScheduleCardStyle, formatTime } from "./logic.ts";
+
+type Props = {
+  class?: string;
+  start_at: Date;
+  end_at: Date;
+  title: string;
+  session_id?: string | undefined;
+  speaker_name?: string | undefined;
+};
+
+const { title, start_at, end_at, speaker_name } = Astro.props;
+const [cardClass, Icon] = getScheduleCardStyle(title);
+---
+
+<Card class=`p-2 mb-5 ${cardClass}`>
+  <div class="p-4">
+    <div class="space-y-2">
+      <div class="flex text-sm items-center">
+        <Clock class="mr-2 h-4 w-4 flex-shrink-0 text-green-900" />
+        <span class="font-bold text-gray-800"
+          >{formatTime(start_at)} - {formatTime(end_at)}</span
+        >
+        {speaker_name && (
+          <div class="flex items-center ml-5">
+            <User class="h-4 w-4 mr-2 text-gray-600" />
+            <span class="text-gray-600">{speaker_name}</span>
+          </div>
+        )}
+      </div><div class="flex items-center">
+        <Icon class="mr-3 flex-shrink-0 text-gray-900 h-4 w-4" />
+          <h3 class="min-w-0 flex-1 text-base leading-tight font-semibold">
+            {title}
+          </h3>
+      </div>
+    </div>
+  </div>
+</Card>