Custom Scrollbar Dialog

1import { Button } from "@/components/ui/button";
2import {
3  ResponsiveDialog,
4  ResponsiveDialogClose,
5  ResponsiveDialogContent,
6  ResponsiveDialogDescription,
7  ResponsiveDialogFooter,
8  ResponsiveDialogHeader,
9  ResponsiveDialogTitle,
10  ResponsiveDialogTrigger,
11} from "@/components/ui/revola";
12import { ScrollArea } from "@/components/ui/scroll-area";
13 
14export default function CustomScrollDialog() {
15  return (
16    <ResponsiveDialog>
17      <ResponsiveDialogTrigger asChild>
18        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
19          Custom Scrollbar
20        </Button>
21      </ResponsiveDialogTrigger>
22      <ResponsiveDialogContent
23        showCloseButton={false}
24        className="flex max-h-[min(640px,80dvh)] flex-col overflow-hidden"
25      >
26        <ScrollArea className="flex max-h-full flex-col overflow-hidden">
27          <ResponsiveDialogHeader className="contents space-y-0 text-left">
28            <ResponsiveDialogTitle className="px-6 pt-6">Frequently Asked Questions (FAQ)</ResponsiveDialogTitle>
29            <ResponsiveDialogDescription asChild>
30              <div className="p-6">
31                <div className="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
32                  <div className="space-y-1">
33                    <p>
34                      <strong>Account Management</strong>
35                    </p>
36                    <p>
37                      Navigate to the registration page, provide required information, and verify your email address.
38                      You can sign up using your email or through social media platforms.
39                    </p>
40                  </div>
41                  <div className="space-y-1">
42                    <p>
43                      <strong>Password Reset Process</strong>
44                    </p>
45                    <p>
46                      Users can reset their password through the account settings page. Click &quot;Forgot
47                      Password&quot; and follow the email verification steps to regain account access quickly and
48                      securely.
49                    </p>
50                  </div>
51                  <div className="space-y-1">
52                    <p>
53                      <strong>Service Pricing Tiers</strong>
54                    </p>
55                    <p>
56                      We offer three primary subscription levels designed to meet diverse user needs: Basic (free with
57// … truncated