66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import {
|
|
Calendar,
|
|
Button,
|
|
SpaceBetween,
|
|
Container,
|
|
Header,
|
|
} from "@cloudscape-design/components";
|
|
import { useState } from "react";
|
|
import { FormattedDate } from "react-intl";
|
|
import { Link } from "react-router";
|
|
|
|
export const SignUp = () => {
|
|
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
|
const tuesday = 2;
|
|
const thursday = 4;
|
|
const isDateEnabled = (date: Date) =>
|
|
[tuesday, thursday].includes(date.getDay());
|
|
const availableSlots: number = 3;
|
|
const availableTokens: number = 0;
|
|
|
|
return (
|
|
<SpaceBetween size="s" alignItems={"center"}>
|
|
<Container>
|
|
<Header>Pick a date</Header>
|
|
<Calendar
|
|
value={selectedDate || ""}
|
|
onChange={(e) => setSelectedDate(e.detail.value)}
|
|
isDateEnabled={isDateEnabled}
|
|
/>
|
|
{selectedDate && (
|
|
<>
|
|
<Header>
|
|
<FormattedDate
|
|
value={selectedDate}
|
|
day="numeric"
|
|
month="long"
|
|
year="numeric"
|
|
/>
|
|
</Header>
|
|
{availableSlots === 0 ? (
|
|
<p>There are no available slots for this date.</p>
|
|
) : (
|
|
<>
|
|
<p>There are {availableSlots} available slots for this date.</p>
|
|
<Button disabled={!availableTokens}>Sign up</Button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</Container>
|
|
{!availableTokens && (
|
|
<Container>
|
|
<p>
|
|
You don't have any tokens to sign up to a slot, please buy here.
|
|
</p>
|
|
<Button>
|
|
<Link to="/buy" style={{ textDecoration: "none" }}>
|
|
Buy
|
|
</Link>
|
|
</Button>
|
|
</Container>
|
|
)}
|
|
</SpaceBetween>
|
|
);
|
|
};
|