75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
Drawer,
|
||
DrawerContent,
|
||
DrawerDescription,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerTitle,
|
||
} from "@/components/ui/drawer";
|
||
import { useIsMobile } from "@/hooks/use-mobile";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type Props = {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
title: React.ReactNode;
|
||
description?: React.ReactNode;
|
||
children: React.ReactNode;
|
||
footer?: React.ReactNode;
|
||
className?: string;
|
||
};
|
||
|
||
/**
|
||
* Masaüstünde Dialog, mobilde (neredeyse) tam ekran alttan açılan Drawer.
|
||
* Formlar bu bileşenle açılır (Bölüm 4: "formlar mobilde tam ekran Sheet/Drawer").
|
||
*/
|
||
export function ResponsiveDialog({
|
||
open,
|
||
onOpenChange,
|
||
title,
|
||
description,
|
||
children,
|
||
footer,
|
||
className,
|
||
}: Props) {
|
||
const isMobile = useIsMobile();
|
||
|
||
if (isMobile) {
|
||
return (
|
||
<Drawer open={open} onOpenChange={onOpenChange}>
|
||
<DrawerContent className="max-h-[96dvh]">
|
||
<DrawerHeader className="text-left">
|
||
<DrawerTitle>{title}</DrawerTitle>
|
||
{description ? <DrawerDescription>{description}</DrawerDescription> : null}
|
||
</DrawerHeader>
|
||
<div className={cn("overflow-y-auto px-4 pb-2", className)}>{children}</div>
|
||
{footer ? <DrawerFooter className="pb-safe">{footer}</DrawerFooter> : null}
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>{title}</DialogTitle>
|
||
{description ? <DialogDescription>{description}</DialogDescription> : null}
|
||
</DialogHeader>
|
||
<div className={className}>{children}</div>
|
||
{footer ? <DialogFooter>{footer}</DialogFooter> : null}
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|