Resizable

1import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "passport-ui";
2import { Card } from "passport-ui";

1<div className="w-sm h-96">
2  <ResizablePanelGroup direction="horizontal">
3    <ResizablePanel defaultSize={50}>
4      <Card className="h-full rounded-none flex items-center justify-center">
5        <div className="meta-container">
6          <h3>Panel One</h3>
7          <p>This panel can be resized</p>
8        </div>
9      </Card>
10    </ResizablePanel>
11    <ResizableHandle withHandle />
12    <ResizablePanel defaultSize={50}>
13      <Card className="h-full rounded-none flex items-center justify-center">
14        <div className="meta-container">
15          <h3>Panel Two</h3>
16          <p>Drag the handle to resize</p>
17        </div>
18      </Card>
19    </ResizablePanel>
20  </ResizablePanelGroup>
21</div>
22 
23{/* Vertical layout */}
24<div className="w-sm h-96">
25  <ResizablePanelGroup direction="vertical">
26    <ResizablePanel defaultSize={50}>
27      <Card className="h-full rounded-none">Panel One</Card>
28    </ResizablePanel>
29    <ResizableHandle />
30    <ResizablePanel defaultSize={50}>
31      <Card className="h-full rounded-none">Panel Two</Card>
32    </ResizablePanel>
33  </ResizablePanelGroup>
34</div>