Issue JanPoonthong#2 [Frontend]: Calendar

src/app/page.tsx

@@ -1,4 +1,50 @@
 import Image from "next/image";
+import { Calendar } from "@/components/Calendar";
+import { Schedule } from "@/types/Schedule";
+
+const sample_data: Schedule[] = [
+  {
+    "title": "Streaming",
+    "start": "2024-08-14T16:45:00+07:00",
+    "end": "2024-08-14T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-15T16:45:00+07:00",
+    "end": "2024-08-15T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-16T16:45:00+07:00",
+    "end": "2024-08-16T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-17T16:45:00+07:00",
+    "end": "2024-08-17T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-18T16:45:00+07:00",
+    "end": "2024-08-18T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-19T16:45:00+07:00",
+    "end": "2024-08-19T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-20T16:45:00+07:00",
+    "end": "2024-08-20T22:45:00+07:00"
+  },
+  {
+    "title": "Streaming",
+    "start": "2024-08-21T16:45:00+07:00",
+    "end": "2024-08-21T22:45:00+07:00"
+  }
+];
+
 
 export default function Home() {
   return (
@@ -28,6 +74,10 @@ export default function Home() {
         </div>
       </div>
 
+      <div className="py-2">
+        <Calendar data={sample_data} />
+      </div>
+
       <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
         <Image
           className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"

src/components/Calendar/Calendar.tsx

@@ -0,0 +1,71 @@
+import { Schedule } from "@/types/Schedule";
+
+const lanes = [
+  {
+    title: "Monday"
+  },
+  {
+    title: "Tuesday"
+  },
+  {
+    title: "Wednesday"
+  },
+  {
+    title: "Thursday"
+  },
+  {
+    title: "Friday"
+  },
+  {
+    title: "Saturday"
+  },
+  {
+    title: "Sunday"
+  }
+]
+
+const TITLE_HEIGHT = 'h-[5rem]';
+const TIMESLOT_HEIGHT = 'h-[6rem]'
+const LANE_HEIGHT = 'h-[145.5rem]' // must equal TIMESLOT_HEIGHT * 24 + 1.5 (this 1.5 used to adjust space of lane below the display text '24:00')
+
+type Props = {
+  data: Schedule[];
+};
+
+export default function Calendar({ data }: Props) {
+  return <div className="w-[1000px] flex flex-row space-x-[2px] px-2 rounded-lg bg-emerald-400">
+    <div className="basis-full flex flex-col items-end pr-2 pb-2">
+      <div className={`${TITLE_HEIGHT}`}></div>
+      {
+        Array.from(Array(24).keys()).map(el =>
+          <div key={`timeslot-${el}`} className={`${TIMESLOT_HEIGHT}`}>{`${el.toString().padStart(2, "0")}`}:00</div>
+        )
+      }
+      <div>24:00</div>
+    </div>
+    {
+      lanes.map(el => (
+        <div key={`cal-lane-${el.title}`} className="basis-full">
+          {/* <Lane title={el.title} active={el.title === 'Monday' ? false : true} /> */}
+          <Lane title={el.title} active={true} />
+        </div>
+      ))
+    }
+  </div>;
+}
+
+type LaneProps = {
+  title: string;
+  active: boolean;
+};
+
+function Lane({ title, active }: LaneProps) {
+  return <div className="flex flex-col">
+    <div className="h-20 text-lg flex items-center justify-center">
+      {title}
+    </div>
+    <div className={`${LANE_HEIGHT} w-full ${active ? 'bg-white' : 'bg-gray-300'}`}>
+
+    </div>
+  </div>;
+}

src/components/Calendar/CalendarSlot.tsx

@@ -0,0 +1,5 @@
+export default function CalendarSlot() {
+  return <>
+    CalendarSlot
+  </>;
+}

src/components/Calendar/index.tsx

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar';
+export { default as CalendarSlot } from './CalendarSlot';

src/types/Schedule.ts

@@ -0,0 +1,5 @@
+export type Schedule = {
+  title: string,
+  start: string,
+  end: string
+}