"use client";

import { Input, PasswordStrengthInput } from "./form"

export function FormDemo() {

return (

<div className="w-full h-full flex flex-col items-center justify-center p-8">

<form className="flex flex-col gap-6 w-full max-w-[280px]" onSubmit={e => e.preventDefault()}>

<div className="flex flex-col gap-2">

<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">

Username

</label>

<Input placeholder="@pratik" />

</div>

<div className="flex flex-col gap-2">

<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">

Password

</label>

<PasswordStrengthInput placeholder="••••••••" />

</div>

<button

type="button"

className="self-start mt-2 px-4 py-2 bg-black dark:bg-zinc-100 text-white dark:text-black rounded-lg font-medium text-[13px] shadow-sm hover:bg-zinc-900 dark:hover:bg-white transition-all active:scale-95"

>

Create account

</button>

</form>

</div>

)

}