81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import DefaultLayout from "../layouts/default.tsx";
|
|
import DateRange from "@/classes/DateRange";
|
|
import CustomCalendar from "../components/calendar.tsx";
|
|
|
|
import "@/styles/index-page.css"
|
|
import { Button } from "flowbite-react";
|
|
import { useState } from "react";
|
|
import { Value } from "@/types/CalendarDates.ts";
|
|
|
|
export default function IndexPage() {
|
|
|
|
const [calendarValue, setCalendarValue] = useState<Value>([new Date(), new Date()]);
|
|
|
|
function clearCalendarValue() {
|
|
setCalendarValue([null, null]);
|
|
}
|
|
|
|
function onChangeCalendarValue(newValue:Value) {
|
|
setCalendarValue(newValue);
|
|
}
|
|
|
|
const allyDates: DateRange[] = [
|
|
new DateRange("2025-08-14", "2025-08-17")
|
|
];
|
|
|
|
const renderListAllyDates = allyDates.map((date) => (
|
|
<li key={crypto.randomUUID()}>
|
|
{date.startDate} - {date.endDate}
|
|
</li>
|
|
));
|
|
|
|
const selfDates = [new DateRange("2025-08-12", "2025-08-15")];
|
|
|
|
const renderListSelfDates = selfDates.map((date) => (
|
|
<li key={crypto.randomUUID()}>
|
|
{date.startDate} - {date.endDate}
|
|
</li>
|
|
));
|
|
|
|
const enemyDates = [new DateRange("2025-08-18", "2025-08-21"), new DateRange("2025-08-08", "2025-08-14")];
|
|
|
|
const renderListEnemyDates = enemyDates.map((date) => (
|
|
<li key={crypto.randomUUID()}>
|
|
{date.startDate} - {date.endDate}
|
|
</li>
|
|
));
|
|
|
|
return (
|
|
<>
|
|
<DefaultLayout>
|
|
<div className="main-container">
|
|
<div className="sub-container">
|
|
<CustomCalendar
|
|
allyDates={allyDates}
|
|
enemyDates={enemyDates}
|
|
selfDates={selfDates}
|
|
calendarValue={calendarValue}
|
|
onChangeCalendarValue={onChangeCalendarValue}
|
|
/>
|
|
<Button className="m-3" onClick={clearCalendarValue}>Clear</Button>
|
|
</div>
|
|
<div className="sub-container">
|
|
<div className="date-list">
|
|
<p className="text-blue-700">Your vacation dates</p>
|
|
<ul>{renderListSelfDates}</ul>
|
|
</div>
|
|
<div className="date-list">
|
|
<p className="text-green-800">Must intersect</p>
|
|
<ul>{renderListAllyDates}</ul>
|
|
</div>
|
|
<div className="date-list">
|
|
<p className="text-amber-600">Must not intersect</p>
|
|
<ul>{renderListEnemyDates}</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|
|
</>
|
|
);
|
|
}
|