Rating Dialog

1import { Button } from "@/components/ui/button";
2import { Label } from "@/components/ui/label";
3import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
4import {
5  ResponsiveDialog,
6  ResponsiveDialogContent,
7  ResponsiveDialogHeader,
8  ResponsiveDialogTitle,
9  ResponsiveDialogTrigger,
10} from "@/components/ui/revola";
11import { Textarea } from "@/components/ui/textarea";
12 
13export default function RatingDialog() {
14  return (
15    <ResponsiveDialog>
16      <ResponsiveDialogTrigger asChild>
17        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
18          Rate Experience
19        </Button>
20      </ResponsiveDialogTrigger>
21      <ResponsiveDialogContent className="mx-auto flex max-h-[85%] flex-col sm:max-w-[400px]">
22        <div>
23          <ResponsiveDialogHeader className="contents text-left">
24            <ResponsiveDialogTitle className="border-b px-6 pb-4 text-base sm:pt-4">
25              Help us improve
26            </ResponsiveDialogTitle>
27          </ResponsiveDialogHeader>
28          <div className="px-6 py-4">
29            <form className="space-y-5">
30              <div className="space-y-4">
31                <div>
32                  <fieldset className="space-y-4">
33                    <legend className="text-lg font-semibold leading-none text-foreground">
34                      How hard was it to set up your account?
35                    </legend>
36                    <RadioGroup className="shadow-xs flex gap-0 -space-x-px rounded-md max-sm:flex-wrap">
37                      {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((number) => (
38                        <label
39                          key={number}
40                          className="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-[[data-state=checked]]:z-10 has-[[data-disabled]]:cursor-not-allowed has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent-foreground/5 has-[[data-disabled]]:opacity-50 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring/70"
41                        >
42                          <RadioGroupItem
43                            id={`radio-17-r${number}`}
44                            value={number.toString()}
45                            className="sr-only after:absolute after:inset-0"
46                          />
47                          {number}
48// … truncated