DropdownMenu

const dropdownMenuFixture = {
  id: "dropdownmenu",
  trigger: "Actions",
  header: "ledger-api",
  align: "start",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  trigger: string;
  header: string;
  align: "start" | "end";
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { DropdownMenu } from "@grassroot/ui-react";
 
export default function DropdownMenuDemo() {
  return (
    <div>
      <DropdownMenu
        header={dropdownMenuFixture.header}
        align={dropdownMenuFixture.align}
        items={[...dropdownMenuFixture.items]}
      >
        {dropdownMenuFixture.trigger}
      </DropdownMenu>
    </div>
  );
}

<script setup lang="ts">
const dropdownMenuFixture = {
  id: "dropdownmenu",
  trigger: "Actions",
  header: "ledger-api",
  align: "start",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  trigger: string;
  header: string;
  align: "start" | "end";
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { DropdownMenu } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <DropdownMenu
      :header="dropdownMenuFixture.header"
      :align="dropdownMenuFixture.align"
      :items="dropdownMenuFixture.items"
      >{{ dropdownMenuFixture.trigger }}</DropdownMenu
    >
  </div>
</template>

import { Component } from "@angular/core";
const dropdownMenuFixture = {
  id: "dropdownmenu",
  trigger: "Actions",
  header: "ledger-api",
  align: "start",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  trigger: string;
  header: string;
  align: "start" | "end";
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
import { GrassrootDropdownMenu } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-dropdown-menu-demo",
  standalone: true,
  imports: [GrassrootDropdownMenu],
  template: `
    <div>
      <grassroot-dropdown-menu
        [header]="fixture.header"
        [align]="fixture.align"
        [items]="fixture.items"
        >{{ fixture.trigger }}</grassroot-dropdown-menu
      >
    </div>
  `,
})
export class DropdownMenuDemoComponent {
  protected readonly fixture = dropdownMenuFixture;
}
 
export default DropdownMenuDemoComponent;

<script lang="ts">
  import { DropdownMenu } from "@grassroot/ui-svelte";
  const dropdownMenuFixture = {
    id: "dropdownmenu",
    trigger: "Actions",
    header: "ledger-api",
    align: "start",
    items: [
      { label: "View logs", shortcut: "⌘L" },
      { divider: true },
      { label: "Restart replicas", shortcut: "⌘R", disabled: true },
      { label: "Tear down", shortcut: "⌘⌫", danger: true },
    ],
  } satisfies {
    id: string;
    trigger: string;
    header: string;
    align: "start" | "end";
    items: ReadonlyArray<
      { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
    >;
  };
 
  </script>
 
{#snippet children()}{dropdownMenuFixture.trigger}{/snippet}
<div>
  <DropdownMenu
    header={dropdownMenuFixture.header}
    align={dropdownMenuFixture.align}
    items={dropdownMenuFixture.items}
    {children}
  />
</div>

/** @jsxImportSource solid-js */
import { DropdownMenu } from "@grassroot/ui-solid";
const dropdownMenuFixture = {
  id: "dropdownmenu",
  trigger: "Actions",
  header: "ledger-api",
  align: "start",
  items: [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Restart replicas", shortcut: "⌘R", disabled: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ],
} satisfies {
  id: string;
  trigger: string;
  header: string;
  align: "start" | "end";
  items: ReadonlyArray<
    { label: string; shortcut?: string; danger?: boolean; disabled?: boolean } | { divider: true }
  >;
};
 
export default function DropdownMenuDemo() {
  return (
    <div>
      <DropdownMenu
        header={dropdownMenuFixture.header}
        align={dropdownMenuFixture.align}
        items={[...dropdownMenuFixture.items]}
      >
        {dropdownMenuFixture.trigger}
      </DropdownMenu>
    </div>
  );
}