Sign Up Dialog

1import { useId } from "react";
2 
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7  ResponsiveDialog,
8  ResponsiveDialogContent,
9  ResponsiveDialogDescription,
10  ResponsiveDialogHeader,
11  ResponsiveDialogTitle,
12  ResponsiveDialogTrigger,
13} from "@/components/ui/revola";
14 
15export default function SignUpDialog() {
16  const id = useId();
17  return (
18    <ResponsiveDialog>
19      <ResponsiveDialogTrigger asChild>
20        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
21          Sign Up
22        </Button>
23      </ResponsiveDialogTrigger>
24      <ResponsiveDialogContent className="sm:max-w-sm">
25        <div className="space-y-4 overflow-y-auto p-6">
26          <div className="flex flex-col items-center gap-2">
27            <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
28              <svg
29                className="stroke-zinc-800 dark:stroke-zinc-100"
30                xmlns="http://www.w3.org/2000/svg"
31                width="20"
32                height="20"
33                viewBox="0 0 32 32"
34                aria-hidden="true"
35              >
36                <circle cx="16" cy="16" r="12" fill="none" strokeWidth="8" />
37              </svg>
38            </div>
39            <ResponsiveDialogHeader className="sm:text-center">
40              <ResponsiveDialogTitle>Sign up Revola</ResponsiveDialogTitle>
41              <ResponsiveDialogDescription>We just need a few details to get you started.</ResponsiveDialogDescription>
42            </ResponsiveDialogHeader>
43          </div>
44 
45          <form className="space-y-5">
46            <div className="space-y-4">
47              <div className="space-y-2">
48                <Label htmlFor={`${id}-name`}>Full name</Label>
49                <Input
50                  required
51                  type="text"
52                  id={`${id}-name`}
53                  placeholder="Matt Welsh"
54                  className="[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]"
55                />
56              </div>
57              <div className="space-y-2">
58                <Label htmlFor={`${id}-email`}>Email</Label>
59                <Input
60                  required
61                  type="email"
62                  id={`${id}-email`}
63                  placeholder="hi@yourcompany.com"
64// … truncated