Drawer

import * as React from "react";
const drawerFixture = {
  id: "drawer",
  trigger: "Open drawer",
  side: "bottom",
  eyebrow: "Deploy",
  title: "Ship v2.4.2",
  body: "Rolling restart across 6 replicas.",
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "bottom" | "top" | "left" | "right";
  eyebrow: string;
  title: string;
  body: string;
  dismissable: boolean;
};
 
import { Button, Drawer } from "@grassroot/ui-react";
 
export default function DrawerDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {drawerFixture.trigger}
      </Button>
      <Drawer
        open={open}
        onOpenChange={setOpen}
        side={drawerFixture.side}
        eyebrow={drawerFixture.eyebrow}
        title={drawerFixture.title}
        dismissable={drawerFixture.dismissable}
      >
        {drawerFixture.body}
      </Drawer>
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Button, Drawer } from "@grassroot/ui-vue";
const drawerFixture = {
  id: "drawer",
  trigger: "Open drawer",
  side: "bottom",
  eyebrow: "Deploy",
  title: "Ship v2.4.2",
  body: "Rolling restart across 6 replicas.",
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "bottom" | "top" | "left" | "right";
  eyebrow: string;
  title: string;
  body: string;
  dismissable: boolean;
};
 
const open = ref(false);
</script>
 
<template>
  <div>
    <Button variant="secondary" @click="open = true">{{ drawerFixture.trigger }}</Button>
    <Drawer
      v-model:open="open"
      :side="drawerFixture.side"
      :eyebrow="drawerFixture.eyebrow"
      :dismissable="drawerFixture.dismissable"
      ><template #title>{{ drawerFixture.title }}</template
      >{{ drawerFixture.body }}</Drawer
    >
  </div>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootButton, GrassrootDrawer, GrassrootDrawerTitle } from "@grassroot/ui-angular";
const drawerFixture = {
  id: "drawer",
  trigger: "Open drawer",
  side: "bottom",
  eyebrow: "Deploy",
  title: "Ship v2.4.2",
  body: "Rolling restart across 6 replicas.",
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "bottom" | "top" | "left" | "right";
  eyebrow: string;
  title: string;
  body: string;
  dismissable: boolean;
};
 
@Component({
  selector: "app-drawer-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootDrawer, GrassrootDrawerTitle],
  template: `
    <div>
      <grassroot-button variant="secondary" (click)="open.set(true)">{{
        fixture.trigger
      }}</grassroot-button>
      <grassroot-drawer
        [open]="open()"
        (openChange)="open.set($event)"
        [side]="fixture.side"
        [eyebrow]="fixture.eyebrow"
        [dismissable]="fixture.dismissable"
        ><h2 grassrootDrawerTitle>{{ fixture.title }}</h2>
        {{ fixture.body }}</grassroot-drawer
      >
    </div>
  `,
})
export class DrawerDemoComponent {
  readonly open = signal(false);
  protected readonly fixture = drawerFixture;
}
 
export default DrawerDemoComponent;

<script lang="ts">
  import { Button, Drawer } from "@grassroot/ui-svelte";
  const drawerFixture = {
    id: "drawer",
    trigger: "Open drawer",
    side: "bottom",
    eyebrow: "Deploy",
    title: "Ship v2.4.2",
    body: "Rolling restart across 6 replicas.",
    dismissable: true,
  } satisfies {
    id: string;
    trigger: string;
    side: "bottom" | "top" | "left" | "right";
    eyebrow: string;
    title: string;
    body: string;
    dismissable: boolean;
  };
 
  let open = $state(false);
</script>
 
{#snippet title()}{drawerFixture.title}{/snippet}
{#snippet children()}{drawerFixture.body}{/snippet}
<div>
  <Button variant="secondary" onClick={() => (open = true)}>{drawerFixture.trigger}</Button>
  <Drawer
    {open}
    onOpenChange={(next) => (open = next)}
    side={drawerFixture.side}
    eyebrow={drawerFixture.eyebrow}
    dismissable={drawerFixture.dismissable}
    {title}
    {children}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Button, Drawer } from "@grassroot/ui-solid";
const drawerFixture = {
  id: "drawer",
  trigger: "Open drawer",
  side: "bottom",
  eyebrow: "Deploy",
  title: "Ship v2.4.2",
  body: "Rolling restart across 6 replicas.",
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "bottom" | "top" | "left" | "right";
  eyebrow: string;
  title: string;
  body: string;
  dismissable: boolean;
};
 
export default function DrawerDemo() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {drawerFixture.trigger}
      </Button>
      <Drawer
        open={open()}
        onOpenChange={setOpen}
        side={drawerFixture.side}
        eyebrow={drawerFixture.eyebrow}
        title={drawerFixture.title}
        dismissable={drawerFixture.dismissable}
      >
        {drawerFixture.body}
      </Drawer>
    </div>
  );
}