Sign In Dialog

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