Drawer

import { Drawer, Button } from "@grassroot/ui-react";
 
const [open, setOpen] = React.useState(false);
 
<Button variant="secondary" onClick={() => setOpen(true)}>Open drawer</Button>
<Drawer open={open} onOpenChange={setOpen} eyebrow="Deploy" title="Ship v2.4.2">
  <p>Rolling restart across 6 replicas.</p>
</Drawer>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Drawer } from "@grassroot/ui-vue";
 
const open = ref(false);
</script>
 
<template>
  <Button variant="secondary" @click="open = true">Open drawer</Button>
  <Drawer
    v-model:open="open"
    eyebrow="Deploy"
    title="Ship v2.4.2"
  >
    <p>Rolling restart across 6 replicas.</p>
  </Drawer>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootButton, GrassrootDrawer } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootButton, GrassrootDrawer],
  template: `
    <grassroot-button
      variant="secondary"
      (click)="open.set(true)"
    >Open drawer</grassroot-button>
    <grassroot-drawer
      [open]="open()"
      (openChange)="open.set($event)"
      eyebrow="Deploy"
      title="Ship v2.4.2"
    >
      <p>Rolling restart across 6 replicas.</p>
    </grassroot-drawer>
  `,
})
export class ExampleComponent {
  readonly open = signal(false);
}

<script lang="ts">
  import { Button, Drawer } from "@grassroot/ui-svelte";
 
  let open = $state(false);
</script>
 
<Button variant="secondary" onClick={() => open = true}>Open drawer</Button>
<Drawer
  open={open}
  onOpenChange={(next) => (open = next)}
  eyebrow="Deploy"
>{#snippet title()}Ship v2.4.2{/snippet}
 
  <p>Rolling restart across 6 replicas.</p>
</Drawer>

import { createSignal } from "solid-js";
import { Button, Drawer } from "@grassroot/ui-solid";
 
export function Example() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Open drawer</Button>
      <Drawer
        open={open()}
        onOpenChange={setOpen}
        eyebrow="Deploy"
        title="Ship v2.4.2"
      >
        <p>Rolling restart across 6 replicas.</p>
      </Drawer>
    </>
  );
}