page.tsx

import { Icons } from '@/components/icons'
import { buttonVariants } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { UserAuthForm } from '@/components/user-auth-form'
import { cn } from '@/lib/utils'
import Link from 'next/link'

export const metadata = {
    title: "Create an account",
    description: "Create an account to get started.",
}

export default function SignupPage() {
    return (
        <div className="container grid items-center gap-8 pb-8 pt-6 md:py-8 max-w-lg">
            <Card>
                <CardHeader className="space-y-1">
                    <CardTitle className="text-2xl">Sign up</CardTitle>
                    <CardDescription>
                        Give yourself a username, enter your email and password below to create an account
                    </CardDescription>
                </CardHeader>
                <CardContent className="grid gap-4">
                    <UserAuthForm type='signup' />
                </CardContent>
                <CardFooter className="flex flex-wrap items-center justify-between gap-2">
                    <div className="text-sm text-muted-foreground">
                        <span className="mr-1 hidden sm:inline-block">
                            Already have an account?{" "}
                        </span>
                        <Link
                            aria-label="Sign in"
                            href="/login"
                            className="text-primary underline-offset-4 transition-colors hover:underline"
                        >
                            Sign in
                        </Link>
                    </div>
                </CardFooter>
            </Card>
        </div>
    )
}