A list beside a detail, split again

// apps/docs/examples/ui/resizable.tsx'use client';
import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from '@workspace/active-ui/components/primitives/resizable';
/** * Panels whose sizes the reader drags: a list beside a detail pane, the * detail split again from top to bottom. Sizes as strings are percentages; * numbers would be pixels. */export default function ResizableExample() {  return (    <ResizablePanelGroup      orientation="horizontal"      className="min-h-64 max-w-lg rounded-lg border"    >      <ResizablePanel defaultSize="35" minSize="20">        <div className="flex h-full items-center justify-center p-4 text-sm">          Participants        </div>      </ResizablePanel>      <ResizableHandle withHandle aria-label="Resize the list" />      <ResizablePanel defaultSize="65">        <ResizablePanelGroup orientation="vertical">          <ResizablePanel defaultSize="60">            <div className="flex h-full items-center justify-center p-4 text-sm">              Details            </div>          </ResizablePanel>          <ResizableHandle aria-label="Resize the details" />          <ResizablePanel defaultSize="40" minSize="15">            <div className="flex h-full items-center justify-center p-4 text-sm">              History            </div>          </ResizablePanel>        </ResizablePanelGroup>      </ResizablePanel>    </ResizablePanelGroup>  );}