blob: a65afb200d897756b80ffe5c9a3f3bd4c76e4127 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
"use client";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import TldrawComponent from "./tldrawComponent";
import Sidepanel from "./sidepanel";
import Image from "next/image";
import { DragIcon } from "@repo/ui/icons";
import { useRef, useState } from "react";
import { ChevronRight } from "lucide-react";
export default function ResizableLayout({ id }: { id: string }) {
const panelGroupRef = useRef<any>(null);
const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(false);
const handleResize = () => {
if (isLeftPanelCollapsed && panelGroupRef.current) {
panelGroupRef.current?.setLayout([20, 80]);
}
};
return (
<PanelGroup
className="text-white h-screen py-[1vh] px-[1vh] bg-[#171B1F]"
direction="horizontal"
ref={panelGroupRef}
onLayout={(sizes) => {
setIsLeftPanelCollapsed(sizes[0] === 0);
}}
>
<Panel collapsible={true} defaultSize={30} minSize={20}>
<Sidepanel />
</Panel>
<PanelResizeHandle
onClick={handleResize}
className="w-4 h-[98vh] relative"
>
<div
className={`rounded-lg bg-[#2F363B] absolute top-1/2 z-[1000000] -translate-y-1/2 transition-all py-2 ${!isLeftPanelCollapsed && "px-1"}`}
>
{isLeftPanelCollapsed ? (
<ChevronRight className="text-[#989EA4] h-6 w-4 cursor-pointer" />
) : (
<Image src={DragIcon} alt="drag-icon" />
)}
</div>
</PanelResizeHandle>
<Panel defaultSize={70} minSize={60}>
<div className="relative w-full h-[98vh] rounded-xl overflow-hidden">
<TldrawComponent id={id} />
</div>
</Panel>
</PanelGroup>
);
}
|