"use client";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@countryclub/ui-react";

export default function ResizableVertical() {
  return (
    // The panel group forces height:100% inline, so the fixed height lives
    // on this wrapper.
    <div className="h-[260px] w-full max-w-md overflow-hidden rounded-xl border">
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel defaultSize={35}>
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold text-sm">Leaderboard</span>
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize={65}>
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold text-sm">Sunday pairings</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}
Resizable

Import

Default

Vertical
