Resizable

1import {
2    ResizableHandle,
3    ResizablePanel,
4    ResizablePanelGroup,
5} from '@/components/ui/resizable'
6
7export function ResizableDemo() {
8    return (
9        <ResizablePanelGroup
10            direction="horizontal"
11            className="border-border max-w-md min-w-64 rounded-lg border text-sm sm:min-w-[450px]"
12        >
13            <ResizablePanel defaultSize={25}>
14                <div className="flex h-[300px] items-center justify-center bg-gray-100 p-6">
15                    <span className="font-medium">left</span>
16                </div>
17            </ResizablePanel>
18            <ResizableHandle />
19            <ResizablePanel defaultSize={50}>
20                <ResizablePanelGroup direction="vertical">
21                    <ResizablePanel defaultSize={25}>
22                        <div className="flex h-full items-center justify-center bg-gray-100 p-6">
23                            <span className="font-medium">top</span>
24                        </div>
25                    </ResizablePanel>
26                    <ResizableHandle />
27                    <ResizablePanel defaultSize={35}>
28                        <div className="flex h-full items-center justify-center bg-gray-100 p-6">
29                            <span className="font-medium">middle</span>
30                        </div>
31                    </ResizablePanel>
32                    <ResizableHandle />
33                    <ResizablePanel defaultSize={40}>
34                        <div className="flex h-full items-center justify-center bg-gray-100 p-6">
35                            <span className="font-medium">bottom</span>
36                        </div>
37                    </ResizablePanel>
38                </ResizablePanelGroup>
39            </ResizablePanel>
40            <ResizableHandle />
41            <ResizablePanel defaultSize={25}>
42                <div className="flex h-[300px] items-center justify-center bg-gray-100 p-6">
43                    <span className="font-medium">right</span>
44                </div>
45            </ResizablePanel>
46        </ResizablePanelGroup>
47    )
48}
49

1import {
2    ResizableHandle,
3    ResizablePanel,
4    ResizablePanelGroup,
5} from '@/components/ui/resizable'
6
7export function ResizableVertical() {
8    return (
9        <ResizablePanelGroup
10            direction="vertical"
11            className="border-border min-h-[300px] max-w-md min-w-64 rounded-lg border text-sm sm:min-w-[450px]"
12        >
13            <ResizablePanel className="min-h-fit" defaultSize={40}>
14                <div className="flex h-full items-center justify-center bg-gray-100 p-4 font-semibold">
15                    Top
16                </div>
17            </ResizablePanel>
18
19            <ResizableHandle />
20            <ResizablePanel className="min-h-fit" defaultSize={60}>
21                <div className="flex h-full items-center justify-center bg-gray-100 p-4 font-semibold">
22                    Bottom
23                </div>
24            </ResizablePanel>
25        </ResizablePanelGroup>
26    )
27}
28

1import {
2    ResizableHandle,
3    ResizablePanel,
4    ResizablePanelGroup,
5} from '@/components/ui/resizable'
6
7export function ResizableHandleDemo() {
8    return (
9        <ResizablePanelGroup
10            direction="horizontal"
11            className="border-border min-h-[300px] max-w-md min-w-64 rounded-lg border text-sm sm:min-w-[450px]"
12        >
13            <ResizablePanel className="min-h-fit" defaultSize={30}>
14                <div className="flex h-full items-center justify-center bg-gray-100 font-semibold">
15                    Sidebar
16                </div>
17            </ResizablePanel>
18            <ResizableHandle withHandle />
19            <ResizablePanel className="min-h-fit" defaultSize={70}>
20                <ResizablePanelGroup direction="vertical">
21                    <ResizablePanel className="min-h-fit" defaultSize={60}>
22                        <div className="flex h-full items-center justify-center bg-gray-100 font-semibold">
23                            Header
24                        </div>
25                    </ResizablePanel>
26
27                    <ResizableHandle withHandle />
28                    <ResizablePanel className="min-h-fit" defaultSize={60}>
29                        <div className="flex h-full items-center justify-center bg-gray-100 font-semibold">
30                            Content
31                        </div>
32                    </ResizablePanel>
33                </ResizablePanelGroup>
34            </ResizablePanel>
35        </ResizablePanelGroup>
36    )
37}
38