feat: implement Conference List & Card

package.json

@@ -9,6 +9,7 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@internationalized/date": "^3.6.0",
 		"@nextui-org/navbar": "^2.2.7",
 		"@nextui-org/react": "^2.6.10",
 		"@nextui-org/system": "^2.4.5",

src/app/components/Conference/Card.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { parseDate, Time } from "@internationalized/date";
+
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	DateInput,
+	Divider,
+	TimeInput,
+} from "@nextui-org/react";
+import { Conference } from "./Conference";
+
+export const ConferenceCard = ({
+	id,
+	title,
+	author,
+	date,
+	hours,
+}: Conference) => {
+	return (
+		<Card className="max-w-[400px]">
+			<CardHeader>
+				<div className="flex flex-col">
+					<p className="text-md">{title}</p>
+					<p className="text-small text-default-500">{author}</p>
+				</div>
+			</CardHeader>
+			<Divider />
+			<CardBody className="gap-2">
+				<DateInput isReadOnly label="Date" value={parseDate(date)} />
+				{hours.map((hour, hourIndex) => (
+					<div
+						className="flex items-center gap-2"
+						key={`${id}-${hourIndex}`}
+					>
+						<TimeInput
+							isReadOnly
+							label="Start"
+							hourCycle={24}
+							value={
+								new Time(hour.start.hours, hour.start.minutes)
+							}
+						/>
+						<span>-</span>
+						<TimeInput
+							isReadOnly
+							label="End"
+							hourCycle={24}
+							value={new Time(hour.end.hours, hour.end.minutes)}
+						/>
+					</div>
+				))}
+			</CardBody>
+		</Card>
+	);
+};

src/app/components/Conference/Conference.d.ts

@@ -0,0 +1,16 @@
+export interface Conference {
+	id: string;
+	title: string;
+	author: string;
+	date: string;
+	hours: {
+		start: {
+			hours: number;
+			minutes: number;
+		};
+		end: {
+			hours: number;
+			minutes: number;
+		};
+	}[];
+}

src/app/components/Conference/List.tsx

@@ -0,0 +1,23 @@
+import { ConferenceCard } from "./Card";
+import { Conference } from "./Conference";
+
+export const ConferenceList = ({
+	conferences,
+}: {
+	conferences: Conference[];
+}) => {
+	return (
+		<div className="flex gap-2">
+			{conferences.map((conference) => (
+				<ConferenceCard
+					key={conference.id}
+                    id={conference.id}
+					title={conference.title}
+					author={conference.author}
+					date={conference.date}
+					hours={conference.hours}
+				/>
+			))}
+		</div>
+	);
+};

src/app/components/Header/index.tsx

@@ -15,7 +15,7 @@ export const Header = () => {
 	const { data: session } = useSession();
 
 	return (
-		<Navbar>
+		<Navbar className="mb-2">
 			<NavbarBrand>
 				<p className="font-bold text-inherit">Toogether</p>
 			</NavbarBrand>

src/app/page.tsx

@@ -1,9 +1,55 @@
+import { ConferenceList } from "./components/Conference/List";
 import { Header } from "./components/Header";
 
+const RandomConferenceData = [
+	{
+		id: "1",
+		title: "Conference sur les conférences",
+		author: "Rémi Formentel",
+		date: "2021-09-01",
+		hours: [
+			{
+				start: { hours: 9, minutes: 0 },
+				end: { hours: 12, minutes: 0 },
+			},
+			{
+				start: { hours: 13, minutes: 0 },
+				end: { hours: 15, minutes: 0 },
+			},
+		],
+	},
+	{
+		id: "2",
+		title: "Apprendre a dev pour les nuls",
+		author: "Fabien Taupin",
+		date: "2021-09-01",
+		hours: [
+			{
+				start: { hours: 18, minutes: 0 },
+				end: { hours: 23, minutes: 0 },
+			},
+		],
+	},
+];
+
 const HomePage = () => {
 	return (
 		<>
 			<Header />
+			<main className="flex flex-col gap-8 p-4">
+				<section className="flex flex-col gap-2">
+					<h2 className="font-semibold text-lg">Cours a venir</h2>
+					<ConferenceList conferences={RandomConferenceData} />
+				</section>
+				<section className="flex flex-col gap-2">
+					<h2 className="font-semibold text-lg">Cours passés</h2>
+					<ConferenceList conferences={RandomConferenceData} />
+				</section>
+				<section className="flex flex-col gap-2">
+					<h2 className="font-semibold text-lg">Autres cours</h2>
+					<ConferenceList conferences={RandomConferenceData} />
+				</section>
+			</main>
 		</>
 	);
 };