Kbd

const kbdFixture = {
  id: "kbd",
  keys: ["⌘", "K"],
} satisfies { id: string; keys: string[] };
 
import { Kbd } from "@grassroot/ui-react";
 
export default function KbdDemo() {
  return (
    <div>
      {kbdFixture.keys.map((key) => (
        <Kbd key={key}>{key}</Kbd>
      ))}
    </div>
  );
}

<script setup lang="ts">
import { Kbd } from "@grassroot/ui-vue";
const kbdFixture = {
  id: "kbd",
  keys: ["⌘", "K"],
} satisfies { id: string; keys: string[] };
 
</script>
 
<template>
  <div>
    <Kbd v-for="key in kbdFixture.keys" :key="key">{{ key }}</Kbd>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootKbd } from "@grassroot/ui-angular";
const kbdFixture = {
  id: "kbd",
  keys: ["⌘", "K"],
} satisfies { id: string; keys: string[] };
 
@Component({
  selector: "app-kbd-demo",
  standalone: true,
  imports: [GrassrootKbd],
  template: `
    <div>
      @for (key of fixture.keys; track key) {
        <grassroot-kbd>{{ key }}</grassroot-kbd>
      }
    </div>
  `,
})
export class KbdDemoComponent {
  protected readonly fixture = kbdFixture;
}
 
export default KbdDemoComponent;

<script lang="ts">
  import { Kbd } from "@grassroot/ui-svelte";
  const kbdFixture = {
    id: "kbd",
    keys: ["⌘", "K"],
  } satisfies { id: string; keys: string[] };
 
  </script>
 
<div>
  {#each kbdFixture.keys as key (key)}<Kbd>{key}</Kbd>{/each}
</div>

/** @jsxImportSource solid-js */
import { Kbd } from "@grassroot/ui-solid";
const kbdFixture = {
  id: "kbd",
  keys: ["⌘", "K"],
} satisfies { id: string; keys: string[] };
 
export default function KbdDemo() {
  return (
    <div>
      {kbdFixture.keys.map((key) => (
        <Kbd>{key}</Kbd>
      ))}
    </div>
  );
}