Feedback Dialog

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import {
5  ResponsiveDialog,
6  ResponsiveDialogContent,
7  ResponsiveDialogDescription,
8  ResponsiveDialogHeader,
9  ResponsiveDialogTitle,
10  ResponsiveDialogTrigger,
11} from "@/components/ui/revola";
12import { Textarea } from "@/components/ui/textarea";
13 
14export default function FeedbackDialog() {
15  return (
16    <ResponsiveDialog>
17      <ResponsiveDialogTrigger asChild>
18        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
19          Send Feedback
20        </Button>
21      </ResponsiveDialogTrigger>
22      <ResponsiveDialogContent className="sm:max-w-sm">
23        <div className="space-y-4 overflow-y-auto p-6 pt-2 sm:p-6">
24          <ResponsiveDialogHeader>
25            <ResponsiveDialogTitle>Send us feedback</ResponsiveDialogTitle>
26            <ResponsiveDialogDescription className="text-balance">
27              Watch{" "}
28              <a className="text-foreground underline-offset-2 hover:underline" href="#">
29                tutorials
30              </a>
31              , read Revola&lsquo;s{" "}
32              <a className="text-foreground underline-offset-2 hover:underline" href="#">
33                documentation
34              </a>
35              , or join our{" "}
36              <a className="text-foreground underline-offset-2 hover:underline" href="#">
37                Discord
38              </a>{" "}
39              for community help.
40            </ResponsiveDialogDescription>
41          </ResponsiveDialogHeader>
42          <form className="space-y-5" onSubmit={(e) => e.preventDefault()}>
43            <Textarea
44              rows={3}
45              id="feedback"
46              className="resize-none"
47              placeholder="How can we improve Revola?"
48              aria-label="Send feedback"
49            />
50            <div className="flex flex-col sm:flex-row sm:justify-end">
51              <Button type="button">Send feedback</Button>
52            </div>
53          </form>
54        </div>
55      </ResponsiveDialogContent>
56    </ResponsiveDialog>
57  );
58}