Resizable

const resizableFixture = {
  id: "resizable",
  defaultSize: 50,
  className: "h-[200px] w-full",
  first: { label: "Editor", body: "Drag the handle to split." },
  second: {
    label: "Preview",
    className: "bg-sunken",
    body: "Arrow keys nudge the handle when focused.",
  },
} satisfies {
  id: string;
  defaultSize: number;
  className: string;
  first: { label: string; body: string };
  second: { label: string; className: string; body: string };
};
 
import { Resizable, ResizablePanel } from "@grassroot/ui-react";
 
export default function ResizableDemo() {
  return (
    <div>
      <Resizable defaultSize={resizableFixture.defaultSize} className={resizableFixture.className}>
        <ResizablePanel label={resizableFixture.first.label}>
          {resizableFixture.first.body}
        </ResizablePanel>
        <ResizablePanel
          label={resizableFixture.second.label}
          className={resizableFixture.second.className}
        >
          {resizableFixture.second.body}
        </ResizablePanel>
      </Resizable>
    </div>
  );
}

<script setup lang="ts">
const resizableFixture = {
  id: "resizable",
  defaultSize: 50,
  className: "h-[200px] w-full",
  first: { label: "Editor", body: "Drag the handle to split." },
  second: {
    label: "Preview",
    className: "bg-sunken",
    body: "Arrow keys nudge the handle when focused.",
  },
} satisfies {
  id: string;
  defaultSize: number;
  className: string;
  first: { label: string; body: string };
  second: { label: string; className: string; body: string };
};
 
import { Resizable, ResizablePanel } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Resizable :default-size="resizableFixture.defaultSize" :class="resizableFixture.className">
      <template #first>
        <ResizablePanel :label="resizableFixture.first.label">{{
          resizableFixture.first.body
        }}</ResizablePanel>
      </template>
      <template #second>
        <ResizablePanel
          :label="resizableFixture.second.label"
          :class="resizableFixture.second.className"
        >
          {{ resizableFixture.second.body }}
        </ResizablePanel>
      </template>
    </Resizable>
  </div>
</template>

import { Component } from "@angular/core";
const resizableFixture = {
  id: "resizable",
  defaultSize: 50,
  className: "h-[200px] w-full",
  first: { label: "Editor", body: "Drag the handle to split." },
  second: {
    label: "Preview",
    className: "bg-sunken",
    body: "Arrow keys nudge the handle when focused.",
  },
} satisfies {
  id: string;
  defaultSize: number;
  className: string;
  first: { label: string; body: string };
  second: { label: string; className: string; body: string };
};
 
import { GrassrootResizable, GrassrootResizablePanel } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-resizable-demo",
  standalone: true,
  imports: [GrassrootResizable, GrassrootResizablePanel],
  template: `
    <div>
      <grassroot-resizable [defaultSize]="fixture.defaultSize" [class]="fixture.className">
        <grassroot-resizable-panel first [label]="fixture.first.label">{{
          fixture.first.body
        }}</grassroot-resizable-panel>
        <grassroot-resizable-panel
          second
          [label]="fixture.second.label"
          [class]="fixture.second.className"
        >
          {{ fixture.second.body }}
        </grassroot-resizable-panel>
      </grassroot-resizable>
    </div>
  `,
})
export class ResizableDemoComponent {
  protected readonly fixture = resizableFixture;
}
 
export default ResizableDemoComponent;

<script lang="ts">
  import { Resizable, ResizablePanel } from "@grassroot/ui-svelte";
  const resizableFixture = {
    id: "resizable",
    defaultSize: 50,
    className: "h-[200px] w-full",
    first: { label: "Editor", body: "Drag the handle to split." },
    second: {
      label: "Preview",
      className: "bg-sunken",
      body: "Arrow keys nudge the handle when focused.",
    },
  } satisfies {
    id: string;
    defaultSize: number;
    className: string;
    first: { label: string; body: string };
    second: { label: string; className: string; body: string };
  };
 
  </script>
 
<div>
  <Resizable defaultSize={resizableFixture.defaultSize} className={resizableFixture.className}>
    {#snippet first()}
      <ResizablePanel label={resizableFixture.first.label}
        >{resizableFixture.first.body}</ResizablePanel
      >
    {/snippet}
    {#snippet second()}
      <ResizablePanel
        label={resizableFixture.second.label}
        className={resizableFixture.second.className}
      >
        {resizableFixture.second.body}
      </ResizablePanel>
    {/snippet}
  </Resizable>
</div>

/** @jsxImportSource solid-js */
const resizableFixture = {
  id: "resizable",
  defaultSize: 50,
  className: "h-[200px] w-full",
  first: { label: "Editor", body: "Drag the handle to split." },
  second: {
    label: "Preview",
    className: "bg-sunken",
    body: "Arrow keys nudge the handle when focused.",
  },
} satisfies {
  id: string;
  defaultSize: number;
  className: string;
  first: { label: string; body: string };
  second: { label: string; className: string; body: string };
};
 
import { Resizable, ResizablePanel } from "@grassroot/ui-solid";
 
export default function ResizableDemo() {
  return (
    <div>
      <Resizable defaultSize={resizableFixture.defaultSize} className={resizableFixture.className}>
        <ResizablePanel label={resizableFixture.first.label}>
          {resizableFixture.first.body}
        </ResizablePanel>
        <ResizablePanel
          label={resizableFixture.second.label}
          className={resizableFixture.second.className}
        >
          {resizableFixture.second.body}
        </ResizablePanel>
      </Resizable>
    </div>
  );
}