54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
import { Button } from "@repo/shadcn-ui/components";
|
||
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
||
|
|
import { XIcon } from "lucide-react";
|
||
|
|
|
||
|
|
import type { RightPanelProps } from "./right-panel-types.ts";
|
||
|
|
|
||
|
|
export const RightPanel = ({
|
||
|
|
open,
|
||
|
|
title,
|
||
|
|
className,
|
||
|
|
headerActions,
|
||
|
|
children,
|
||
|
|
onOpenChange,
|
||
|
|
}: RightPanelProps) => {
|
||
|
|
if (!open) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside
|
||
|
|
aria-labelledby="right-panel-title"
|
||
|
|
className={cn(
|
||
|
|
"ml-4", // separación real
|
||
|
|
"border bg-background",
|
||
|
|
"w-[420px] xl:w-[460px]",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="flex items-center justify-between border-b px-4 py-3">
|
||
|
|
<h2 className="truncate text-sm font-semibold" id="right-panel-title">
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
{headerActions}
|
||
|
|
|
||
|
|
{onOpenChange ? (
|
||
|
|
<Button
|
||
|
|
aria-label="Cerrar panel"
|
||
|
|
onClick={() => onOpenChange(false)}
|
||
|
|
size="icon-sm"
|
||
|
|
variant="ghost"
|
||
|
|
>
|
||
|
|
<XIcon className="size-4" />
|
||
|
|
</Button>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex-1 overflow-auto">{children}</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
};
|