ResizablePanel

const resizablePanelFixture = {
  id: "resizable-panel",
  label: "Preview",
  body: "A padded pane body, with an optional mono eyebrow label above it.",
} satisfies {
  id: string;
  label: string;
  body: string;
};
 
import { ResizablePanel } from "@grassroot/ui-react";
 
export default function ResizablePanelDemo() {
  return (
    <div>
      <ResizablePanel label={resizablePanelFixture.label}>
        {resizablePanelFixture.body}
      </ResizablePanel>
    </div>
  );
}

<script setup lang="ts">
const resizablePanelFixture = {
  id: "resizable-panel",
  label: "Preview",
  body: "A padded pane body, with an optional mono eyebrow label above it.",
} satisfies {
  id: string;
  label: string;
  body: string;
};
 
import { ResizablePanel } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <ResizablePanel :label="resizablePanelFixture.label">{{
      resizablePanelFixture.body
    }}</ResizablePanel>
  </div>
</template>

import { Component } from "@angular/core";
const resizablePanelFixture = {
  id: "resizable-panel",
  label: "Preview",
  body: "A padded pane body, with an optional mono eyebrow label above it.",
} satisfies {
  id: string;
  label: string;
  body: string;
};
 
import { GrassrootResizablePanel } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-resizable-panel-demo",
  standalone: true,
  imports: [GrassrootResizablePanel],
  template: `
    <div>
      <grassroot-resizable-panel [label]="fixture.label">{{
        fixture.body
      }}</grassroot-resizable-panel>
    </div>
  `,
})
export class ResizablePanelDemoComponent {
  protected readonly fixture = resizablePanelFixture;
}
 
export default ResizablePanelDemoComponent;

<script lang="ts">
  import { ResizablePanel } from "@grassroot/ui-svelte";
  const resizablePanelFixture = {
    id: "resizable-panel",
    label: "Preview",
    body: "A padded pane body, with an optional mono eyebrow label above it.",
  } satisfies {
    id: string;
    label: string;
    body: string;
  };
 
  </script>
 
<div>
  <ResizablePanel label={resizablePanelFixture.label}>{resizablePanelFixture.body}</ResizablePanel>
</div>

/** @jsxImportSource solid-js */
const resizablePanelFixture = {
  id: "resizable-panel",
  label: "Preview",
  body: "A padded pane body, with an optional mono eyebrow label above it.",
} satisfies {
  id: string;
  label: string;
  body: string;
};
 
import { ResizablePanel } from "@grassroot/ui-solid";
 
export default function ResizablePanelDemo() {
  return (
    <div>
      <ResizablePanel label={resizablePanelFixture.label}>
        {resizablePanelFixture.body}
      </ResizablePanel>
    </div>
  );
}