45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Outlet } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { X } from "lucide-react";
|
|
|
|
import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
|
|
|
|
/**
|
|
* Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
|
|
* slides from the right. Lazy-loaded so Base UI's drawer code (swipe/snap machinery)
|
|
* splits out of the main entry chunk — the wide pane path never pays for it.
|
|
*/
|
|
export function ObjectDetailDrawer({
|
|
open,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onOpenChange={(next) => {
|
|
if (!next) onClose();
|
|
}}
|
|
swipeDirection="right"
|
|
>
|
|
<DrawerContent aria-label={t("objects.detailTitle")}>
|
|
<div className="flex justify-end border-b p-2">
|
|
<DrawerClose
|
|
aria-label={t("actions.closeDetail")}
|
|
className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
>
|
|
<X className="size-4" aria-hidden="true" />
|
|
</DrawerClose>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<Outlet />
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|