Newsletter Dialog

1"use client";
2 
3import { MailIcon } from "lucide-react";
4 
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7import {
8  ResponsiveDialog,
9  ResponsiveDialogContent,
10  ResponsiveDialogDescription,
11  ResponsiveDialogHeader,
12  ResponsiveDialogTitle,
13  ResponsiveDialogTrigger,
14} from "@/components/ui/revola";
15 
16export default function NewsletterDialog() {
17  return (
18    <ResponsiveDialog>
19      <ResponsiveDialogTrigger asChild>
20        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
21          Subscribe
22        </Button>
23      </ResponsiveDialogTrigger>
24      <ResponsiveDialogContent className="sm:max-w-sm">
25        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-0">
26          <div className="mb-2 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>Never miss an update</ResponsiveDialogTitle>
41              <ResponsiveDialogDescription>Subscribe to receive news and special offers.</ResponsiveDialogDescription>
42            </ResponsiveDialogHeader>
43          </div>
44          <form className="space-y-5" onSubmit={(e) => e.preventDefault()}>
45            <div className="*:not-first:mt-2">
46              <div className="relative">
47                <Input
48                  id="dialog-subscribe"
49                  className="peer ps-9"
50                  placeholder="hi@yourcompany.com"
51                  type="email"
52                  aria-label="Email"
53                />
54                <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50">
55                  <MailIcon size={16} aria-hidden="true" />
56                </div>
57              </div>
58            </div>
59            <Button type="submit" className="w-full">
60              Subscribe
61            </Button>
62          </form>
63 
64// … truncated