Resizable

Usage

Transcript

Summary

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@jamie/ui/resizable'
 
export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="text-sm text-muted-foreground">Transcript</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="text-sm text-muted-foreground">Summary</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Vertical

Stack panels vertically with a horizontal drag handle.

Action Items

Meeting Notes

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@jamie/ui/resizable'
 
export function ResizableVerticalDemo() {
  return (
    <ResizablePanelGroup
      orientation="vertical"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={30}>
        <div className="flex h-full items-center justify-center p-4">
          <span className="text-sm text-muted-foreground">Action Items</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={70}>
        <div className="flex h-full items-center justify-center p-4">
          <span className="text-sm text-muted-foreground">Meeting Notes</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

With Handle

Use withHandle to show a visible drag indicator on the resize bar.

Sidebar

Transcript

Ask AI

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@jamie/ui/resizable'
 
export function ResizableWithHandleDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-[200px] max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={30}>
        <div className="flex h-full items-center justify-center p-4">
          <span className="text-sm text-muted-foreground">Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={40}>
        <div className="flex h-full items-center justify-center p-4">
          <span className="text-sm text-muted-foreground">Transcript</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={30}>
        <div className="flex h-full items-center justify-center p-4">
          <span className="text-sm text-muted-foreground">Ask AI</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}