Resizable

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import {
10  ResizableHandle,
11  ResizablePanel,
12  ResizablePanelGroup,
13} from "@/registry/bases/radix/ui/resizable"
14 
15export default function ResizableExample() {
16  return (
17    <ExampleWrapper>
18      <ResizableHorizontal />
19      <ResizableVertical />
20      <ResizableWithHandle />
21      <ResizableNested />
22      <ResizableControlled />
23    </ExampleWrapper>
24  )
25}
26 
27function ResizableHorizontal() {
28  return (
29    <Example title="Horizontal">
30      <ResizablePanelGroup
31        direction="horizontal"
32        className="min-h-[200px] rounded-lg border"
33      >
34        <ResizablePanel defaultSize={25}>
35          <div className="flex h-full items-center justify-center p-6">
36            <span className="font-semibold">Sidebar</span>
37          </div>
38        </ResizablePanel>
39        <ResizableHandle />
40        <ResizablePanel defaultSize={75}>
41          <div className="flex h-full items-center justify-center p-6">
42            <span className="font-semibold">Content</span>
43          </div>
44        </ResizablePanel>
45      </ResizablePanelGroup>
46    </Example>
47  )
48}
49 
50function ResizableVertical() {
51  return (
52    <Example title="Vertical">
53      <ResizablePanelGroup
54        direction="vertical"
55        className="min-h-[200px] rounded-lg border"
56      >
57        <ResizablePanel defaultSize={25}>
58          <div className="flex h-full items-center justify-center p-6">
59            <span className="font-semibold">Header</span>
60          </div>
61        </ResizablePanel>
62        <ResizableHandle />
63        <ResizablePanel defaultSize={75}>
64          <div className="flex h-full items-center justify-center p-6">
65            <span className="font-semibold">Content</span>
66          </div>
67        </ResizablePanel>
68      </ResizablePanelGroup>
69    </Example>
70  )
71}
72 
73function ResizableWithHandle() {
74  return (
75    <Example title="With Handle">
76      <ResizablePanelGroup
77        direction="horizontal"
78        className="min-h-[200px] rounded-lg border"
79      >
80        <ResizablePanel defaultSize={25}>
81          <div className="flex h-full items-center justify-center p-6">
82            <span className="font-semibold">Sidebar</span>
83          </div>
84        </ResizablePanel>
85        <ResizableHandle withHandle />
86        <ResizablePanel defaultSize={75}>
87          <div className="flex h-full items-center justify-center p-6">
88// … truncated