ButtonGroup

import { ButtonGroup, Button } from "@grassroot/ui-react";
const buttonGroupFixture = {
  id: "button-group",
  role: "group",
  buttons: [
    { id: "day", label: "Day", variant: "ghost" },
    { id: "week", label: "Week", variant: "ghost" },
    { id: "month", label: "Month", variant: "ghost" },
  ],
} satisfies {
  id: string;
  role: "group";
  buttons: Array<{ id: string; label: string; variant: "ghost" }>;
};
 
export default function ButtonGroupDemo() {
  return (
    <div>
      <ButtonGroup role={buttonGroupFixture.role}>
        {buttonGroupFixture.buttons.map((button) => (
          <Button key={button.id} variant={button.variant}>
            {button.label}
          </Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

<script setup lang="ts">
import { ButtonGroup, Button } from "@grassroot/ui-vue";
const buttonGroupFixture = {
  id: "button-group",
  role: "group",
  buttons: [
    { id: "day", label: "Day", variant: "ghost" },
    { id: "week", label: "Week", variant: "ghost" },
    { id: "month", label: "Month", variant: "ghost" },
  ],
} satisfies {
  id: string;
  role: "group";
  buttons: Array<{ id: string; label: string; variant: "ghost" }>;
};
 
</script>
 
<template>
  <ButtonGroup :role="buttonGroupFixture.role">
    <Button
      v-for="button in buttonGroupFixture.buttons"
      :key="button.id"
      :variant="button.variant"
      >{{ button.label }}</Button
    >
  </ButtonGroup>
</template>

import { Component } from "@angular/core";
import { GrassrootButtonGroup, GrassrootButton } from "@grassroot/ui-angular";
const buttonGroupFixture = {
  id: "button-group",
  role: "group",
  buttons: [
    { id: "day", label: "Day", variant: "ghost" },
    { id: "week", label: "Week", variant: "ghost" },
    { id: "month", label: "Month", variant: "ghost" },
  ],
} satisfies {
  id: string;
  role: "group";
  buttons: Array<{ id: string; label: string; variant: "ghost" }>;
};
 
@Component({
  selector: "app-button-group-demo",
  standalone: true,
  imports: [GrassrootButtonGroup, GrassrootButton],
  template: `
    <grassroot-button-group [role]="fixture.role">
      @for (button of fixture.buttons; track button.id) {
        <grassroot-button [variant]="button.variant">{{ button.label }}</grassroot-button>
      }
    </grassroot-button-group>
  `,
})
export class ButtonGroupDemoComponent {
  protected readonly fixture = buttonGroupFixture;
}
 
export default ButtonGroupDemoComponent;

<script lang="ts">
  import { ButtonGroup, Button } from "@grassroot/ui-svelte";
  const buttonGroupFixture = {
    id: "button-group",
    role: "group",
    buttons: [
      { id: "day", label: "Day", variant: "ghost" },
      { id: "week", label: "Week", variant: "ghost" },
      { id: "month", label: "Month", variant: "ghost" },
    ],
  } satisfies {
    id: string;
    role: "group";
    buttons: Array<{ id: string; label: string; variant: "ghost" }>;
  };
 
  </script>
 
<ButtonGroup role={buttonGroupFixture.role}>
  {#each buttonGroupFixture.buttons as button (button.id)}
    <Button variant={button.variant}>{button.label}</Button>
  {/each}
</ButtonGroup>

/** @jsxImportSource solid-js */
import { ButtonGroup, Button } from "@grassroot/ui-solid";
const buttonGroupFixture = {
  id: "button-group",
  role: "group",
  buttons: [
    { id: "day", label: "Day", variant: "ghost" },
    { id: "week", label: "Week", variant: "ghost" },
    { id: "month", label: "Month", variant: "ghost" },
  ],
} satisfies {
  id: string;
  role: "group";
  buttons: Array<{ id: string; label: string; variant: "ghost" }>;
};
 
export default function ButtonGroupDemo() {
  return (
    <>
      <ButtonGroup role={buttonGroupFixture.role}>
        {buttonGroupFixture.buttons.map((button) => (
          <Button variant={button.variant}>{button.label}</Button>
        ))}
      </ButtonGroup>
    </>
  );
}