responsive-dialog

1'use client';
2 
3import * as React from 'react';
4import {
5  Drawer,
6  DrawerClose,
7  DrawerContent,
8  DrawerDescription,
9  DrawerFooter,
10  DrawerHeader,
11  DrawerTitle,
12  DrawerTrigger,
13} from '@/components/ui/drawer';
14import {
15  SideDialog,
16  SideDialogBody,
17  SideDialogClose,
18  SideDialogContent,
19  SideDialogDescription,
20  SideDialogFooter,
21  SideDialogHeader,
22  SideDialogTitle,
23  SideDialogTrigger,
24} from '@/components/ui/shuip/side-dialog';
25import { cn } from '@/lib/utils';
26 
27type ResponsiveDialogPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
28type ResponsiveDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
29type ResponsiveDialogBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | number;
30 
31export interface ResponsiveDialogProps {
32  open?: boolean;
33  onOpenChange?: (open: boolean) => void;
34  position?: ResponsiveDialogPosition;
35  size?: ResponsiveDialogSize;
36  breakpoint?: ResponsiveDialogBreakpoint;
37  children?: React.ReactNode;
38}
39 
40export interface ResponsiveDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
41  asChild?: boolean;
42  children: React.ReactNode;
43}
44 
45export interface ResponsiveDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
46  showCloseButton?: boolean;
47  children: React.ReactNode;
48}
49 
50export interface ResponsiveDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
51  children: React.ReactNode;
52}
53 
54export interface ResponsiveDialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
55  children: React.ReactNode;
56}
57 
58export interface ResponsiveDialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
59  children: React.ReactNode;
60}
61 
62export interface ResponsiveDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
63  children: React.ReactNode;
64}
65 
66export interface ResponsiveDialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
67  asChild?: boolean;
68  children?: React.ReactNode;
69}
70 
71export interface ResponsiveDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
72  children: React.ReactNode;
73}
74 
75// Helper function to convert breakpoint to pixels
76const getBreakpointValue = (breakpoint: ResponsiveDialogBreakpoint): number => {
77  if (typeof breakpoint === 'number') {
78    return breakpoint;
79  }
80 
81  const breakpoints = {
82    sm: 640,
83    md: 768,
84    lg: 1024,
85    xl: 1280,
86  };
87 
88  return breakpoints[breakpoint];
89};
90 
91// Custom hook for responsive breakpoint detection
92// … truncated