68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Link } from "react-router"
|
|
|
|
const SignUp = ({
|
|
heading = "Signup",
|
|
logo = {
|
|
// url: "https://www.shadcnblocks.com",
|
|
// src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-wordmark.svg",
|
|
alt: "logo",
|
|
title: "shadcnblocks.com",
|
|
},
|
|
buttonText = "Create Account",
|
|
signupText = "Already a user?",
|
|
}) => {
|
|
return (
|
|
<section className="bg-muted h-screen">
|
|
<div className="flex h-full items-center justify-center">
|
|
{/* Logo */}
|
|
<div className="flex flex-col items-center gap-6 lg:justify-start">
|
|
<a href={logo.url}>
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
title={logo.title}
|
|
className="h-10 dark:invert"
|
|
/>
|
|
</a>
|
|
<div className="min-w-sm border-muted bg-background flex w-full max-w-sm flex-col items-center gap-y-4 rounded-md border px-6 py-8 shadow-md">
|
|
{heading && <h1 className="text-xl font-semibold">{heading}</h1>}
|
|
<Input
|
|
type="email"
|
|
placeholder="Email"
|
|
className="text-sm"
|
|
required
|
|
/>
|
|
<Input
|
|
type="password"
|
|
placeholder="Password"
|
|
className="text-sm"
|
|
required
|
|
/>
|
|
<Input
|
|
type="password"
|
|
placeholder="Confirm Password"
|
|
className="text-sm"
|
|
required
|
|
/>
|
|
<Button type="submit" className="w-full">
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
<div className="text-muted-foreground flex justify-center gap-1 text-sm">
|
|
<p>{signupText}</p>
|
|
<a
|
|
className="text-primary font-medium hover:underline"
|
|
>
|
|
<Link to="/auth/login">Login</Link>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { SignUp };
|