Badge

const badgeFixture = {
  id: "badge",
  items: [
    { label: "Stable", variant: "success" },
    { label: "Review", variant: "warning" },
  ],
} satisfies { id: string; items: Array<{ label: string; variant: "success" | "warning" }> };
 
import { Badge } from "@grassroot/ui-react";
 
export default function BadgeDemo() {
  return (
    <div>
      {badgeFixture.items.map((item) => (
        <Badge key={item.label} variant={item.variant}>
          {item.label}
        </Badge>
      ))}
    </div>
  );
}

<script setup lang="ts">
const badgeFixture = {
  id: "badge",
  items: [
    { label: "Stable", variant: "success" },
    { label: "Review", variant: "warning" },
  ],
} satisfies { id: string; items: Array<{ label: string; variant: "success" | "warning" }> };
 
import { Badge } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Badge v-for="item in badgeFixture.items" :key="item.label" :variant="item.variant">{{
      item.label
    }}</Badge>
  </div>
</template>

import { Component } from "@angular/core";
const badgeFixture = {
  id: "badge",
  items: [
    { label: "Stable", variant: "success" },
    { label: "Review", variant: "warning" },
  ],
} satisfies { id: string; items: Array<{ label: string; variant: "success" | "warning" }> };
 
import { GrassrootBadge } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-badge-demo",
  standalone: true,
  imports: [GrassrootBadge],
  template: `
    <div>
      @for (item of fixture.items; track item.label) {
        <grassroot-badge [variant]="item.variant">{{ item.label }}</grassroot-badge>
      }
    </div>
  `,
})
export class BadgeDemoComponent {
  protected readonly fixture = badgeFixture;
}
 
export default BadgeDemoComponent;

<script lang="ts">
  const badgeFixture = {
    id: "badge",
    items: [
      { label: "Stable", variant: "success" },
      { label: "Review", variant: "warning" },
    ],
  } satisfies { id: string; items: Array<{ label: string; variant: "success" | "warning" }> };
 
  import { Badge } from "@grassroot/ui-svelte";
</script>
 
<div>
  {#each badgeFixture.items as item (item.label)}
    <Badge variant={item.variant}>{item.label}</Badge>
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Badge } from "@grassroot/ui-solid";
const badgeFixture = {
  id: "badge",
  items: [
    { label: "Stable", variant: "success" },
    { label: "Review", variant: "warning" },
  ],
} satisfies { id: string; items: Array<{ label: string; variant: "success" | "warning" }> };
 
import type { JSX } from "solid-js";
 
export default function BadgeDemo(): JSX.Element {
  return (
    <div>
      {badgeFixture.items.map((item) => (
        <Badge variant={item.variant}>{item.label}</Badge>
      ))}
    </div>
  );
}