Resizable

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