Panel

import { Panel } from 'ui-lab-components/panel';
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <div className="h-[400px] w-full max-w-4xl overflow-hidden rounded-lg border border-background-700 bg-background-900">
      <Panel defaultOpen collapseAt={560} spacing="none">
        <Panel.Sidebar
          side="left"
          width={208}
          aria-label="Navigation"
          className="bg-background-950"
        >
          <div className="flex h-full flex-col gap-2 p-3">
            <Skeleton w={72} h={10} />
            <div className="space-y-1">
              <Skeleton h={28} className="rounded-sm" />
              <Skeleton h={28} className="rounded-sm" />
              <Skeleton h={28} className="rounded-sm" />
              <Skeleton h={28} className="rounded-sm" />
            </div>
            <div className="mt-auto space-y-1">
              <Skeleton h={28} className="rounded-sm" />
              <Skeleton h={28} className="rounded-sm" />
            </div>
          </div>
        </Panel.Sidebar>
 
        <Panel.Main>
          <Panel.Header className="flex items-center justify-between border-b border-background-700 px-3 py-2">
            <div className="flex items-center gap-2">
              <Panel.Toggle>
                <button aria-label="Toggle navigation" className="h-7 w-7 rounded-sm bg-background-800" />
              </Panel.Toggle>
              <Skeleton w={96} h={10} />
            </div>
            <div className="flex gap-1">
              <Skeleton w={28} h={28} className="rounded-sm" />
              <Skeleton w={28} h={28} className="rounded-sm" />
            </div>
          </Panel.Header>
 
          <Panel.Content className="block p-4">
            <div className="mx-auto grid max-w-2xl gap-3">
              <Skeleton w={120} h={12} />
              <Skeleton h={10} className="w-11/12" />
              <Skeleton h={10} className="w-full" />
              <Skeleton h={10} className="w-4/5" />
              <div className="grid grid-cols-2 gap-2 pt-3">
                <Skeleton.Image ratio="4/3" className="rounded-sm" />
                <Skeleton.Image ratio="4/3" className="rounded-sm" />
              </div>
            </div>
          </Panel.Content>
 
          <Panel.Footer fixed className="flex justify-between border-t border-background-700 px-3 py-2">
            <Skeleton w={72} h={8} />
            <Skeleton w={48} h={8} />
          </Panel.Footer>
        </Panel.Main>
      </Panel>
    </div>
  );
}
 

import { Panel } from 'ui-lab-components/panel';
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <div className="h-[400px] w-full max-w-4xl overflow-hidden rounded-lg border border-background-700 bg-background-900">
      <Panel spacing="none">
        <Panel.Main>
          <Panel.Header className="flex items-center justify-between border-b border-background-700 px-3 py-2">
            <div className="flex items-center gap-2">
              <Skeleton w={28} h={28} className="rounded-sm" />
              <Skeleton w={112} h={10} />
            </div>
            <Skeleton w={56} h={28} className="rounded-sm" />
          </Panel.Header>
 
          <Panel.Content>
            <Panel.Group>
              <Panel.Pane defaultSize={42} minSize={28} maxSize={62} className="bg-background-950 p-3">
                <div className="grid w-full content-start gap-2">
                  {Array.from({ length: 8 }, (_, index) => (
                    <Skeleton key={index} h={8} className={index % 3 === 0 ? 'w-3/4' : 'w-full'} />
                  ))}
                </div>
              </Panel.Pane>
              <Panel.Resize aria-label="Resize workspace regions" />
              <Panel.Pane defaultSize={58} minSize={38} className="items-center justify-center p-5">
                <div className="grid w-full max-w-sm gap-3">
                  <Skeleton.Image ratio="16/10" className="rounded-md" />
                  <div className="grid gap-1">
                    <Skeleton h={10} className="w-3/5" />
                    <Skeleton h={8} className="w-full" />
                    <Skeleton h={8} className="w-4/5" />
                  </div>
                </div>
              </Panel.Pane>
            </Panel.Group>
          </Panel.Content>
 
          <Panel.Footer className="flex gap-2 border-t border-background-700 px-3 py-2">
            <Skeleton w={48} h={8} />
            <Skeleton w={64} h={8} />
          </Panel.Footer>
        </Panel.Main>
      </Panel>
    </div>
  );
}
 

import { Panel } from 'ui-lab-components/panel';
import { Skeleton } from 'ui-lab-components/skeleton';
 
function Tile({ className }: { className?: string }) {
  return <Skeleton className={`rounded-md ${className ?? ''}`} />;
}
 
export default function Example() {
  return (
    <div className="h-[400px] w-full max-w-4xl overflow-hidden rounded-lg border border-background-700 bg-background-900">
      <Panel spacing="none">
        <Panel.Main>
          <Panel.Header className="flex items-center justify-between border-b border-background-700 px-3 py-2">
            <Skeleton w={112} h={10} />
            <div className="flex gap-1">
              <Skeleton w={28} h={28} className="rounded-sm" />
              <Skeleton w={28} h={28} className="rounded-sm" />
            </div>
          </Panel.Header>
 
          <Panel.Content>
            <Panel.Group>
              <Panel.Pane defaultSize={68} minSize={45}>
                <Panel.Group direction="vertical">
                  <Panel.Pane defaultSize={35} minSize={24} className="p-3">
                    <div className="grid w-full grid-cols-3 gap-2">
                      <Tile className="h-20" />
                      <Tile className="h-20" />
                      <Tile className="h-20" />
                    </div>
                  </Panel.Pane>
                  <Panel.Resize aria-label="Resize dashboard rows" />
                  <Panel.Pane defaultSize={65} minSize={40} className="p-3">
                    <Tile className="h-full w-full" />
                  </Panel.Pane>
                </Panel.Group>
              </Panel.Pane>
              <Panel.Resize aria-label="Resize dashboard columns" />
              <Panel.Pane defaultSize={32} minSize={22} maxSize={45} className="bg-background-950 p-3">
                <div className="grid w-full content-start gap-2">
                  <Skeleton w={72} h={9} />
                  {Array.from({ length: 6 }, (_, index) => (
                    <div key={index} className="flex items-center gap-2 rounded-sm border border-background-700/50 p-2">
                      <Skeleton w={20} h={20} className="rounded-full" />
                      <Skeleton h={8} className={index % 2 ? 'w-2/3' : 'w-4/5'} />
                    </div>
                  ))}
                </div>
              </Panel.Pane>
            </Panel.Group>
          </Panel.Content>
        </Panel.Main>
      </Panel>
    </div>
  );
}