State-tracked resizable layout.

<script setup lang="ts">
import { ref } from "vue"
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"

const left = ref(30)
const right = ref(70)

function onLayout(layout: number[]) {
  left.value = layout[0] ?? 30
  right.value = layout[1] ?? 70
}
</script>

<template>
  <div class="mx-auto w-full max-w-lg">
    <ResizablePanelGroup direction="horizontal" class="rounded-2xl min-h-[200px] border" @layout="onLayout">
      <ResizablePanel id="left" :default-size="30" :min-size="20">
        <div class="flex h-full flex-col items-center justify-center gap-2 p-6">
          <span class="text-sm font-semibold">{{ Math.round(left) }}%</span>
        </div>
      </ResizablePanel>
      <ResizableHandle with-handle />
      <ResizablePanel id="right" :default-size="70" :min-size="30">
        <div class="flex h-full flex-col items-center justify-center gap-2 p-6">
          <span class="text-sm font-semibold">{{ Math.round(right) }}%</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
</template>