import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"export default function ResizableDemo() {  return (    <ResizablePanelGroup      orientation="horizontal"      className="h-72 w-full max-w-lg overflow-hidden rounded-md border-2 border-foreground bg-background shadow-[4px_4px_0px_0px_var(--foreground)]"    >      <ResizablePanel defaultSize={30} minSize={20}>        <div className="flex h-full flex-col gap-1 bg-muted/40 p-3 text-sm">          <div className="mb-2 font-bold">Project files</div>          <div className="rounded-sm bg-primary px-2 py-1 font-medium text-primary-foreground">README.md</div>          <div className="px-2 py-1">package.json</div>          <div className="px-2 py-1">src/index.ts</div>        </div>      </ResizablePanel>      <ResizableHandle withHandle />      <ResizablePanel defaultSize={70}>        <div className="flex h-full flex-col gap-3 p-4">          <div className="border-b-2 border-foreground pb-2 text-sm font-bold">README.md</div>          <p className="text-sm font-semibold">Getting started</p>          <p className="text-sm text-muted-foreground">Install the dependencies, then run the development server to get started.</p>          <div className="rounded-sm border-2 border-foreground bg-muted p-3 font-mono text-xs">npm install<br />npm run dev</div>        </div>      </ResizablePanel>    </ResizablePanelGroup>  )}