73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import {
|
|
Input,
|
|
Button,
|
|
Link,
|
|
Select,
|
|
SelectItem,
|
|
DatePicker,
|
|
} from "@heroui/react";
|
|
import { IconMail, IconLock } from "@tabler/icons-react";
|
|
import { useState } from "react";
|
|
|
|
export default function SignupView({
|
|
onLogin,
|
|
email = "",
|
|
}: {
|
|
onLogin: () => void;
|
|
email: string;
|
|
}) {
|
|
const [emailValue, setEmailValue] = useState(email);
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col">
|
|
<p className="text-3xl">Welcome!</p>
|
|
<p className="text-md opacity-50">Become a membership today!</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex flex-row gap-2">
|
|
<Input label="First name" />
|
|
<Input label="Last name" />
|
|
</div>
|
|
<Input
|
|
endContent={<IconMail />}
|
|
label="Email"
|
|
type="email"
|
|
value={emailValue}
|
|
onValueChange={setEmailValue}
|
|
/>
|
|
<Input label="NRIC" />
|
|
<div className="flex flex-row gap-2">
|
|
<Select label="Gender">
|
|
<SelectItem>Male</SelectItem>
|
|
<SelectItem>Female</SelectItem>
|
|
</Select>
|
|
<DatePicker label="Date of birth" />
|
|
</div>
|
|
<Input endContent={<IconLock />} label="Password" type="password" />
|
|
<Input
|
|
endContent={<IconLock />}
|
|
label="Confirm password"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-4 w-full">
|
|
<Button color="primary" className="w-full">
|
|
Sign up
|
|
</Button>
|
|
<div className="flex flex-row gap-2 w-full justify-center *:my-auto">
|
|
<p className="text-sm">Already have an account?</p>
|
|
<Link
|
|
color="primary"
|
|
onPress={() => {
|
|
onLogin();
|
|
}}
|
|
className="text-sm"
|
|
>
|
|
Login
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|