Tabs

const tabsFixture = {
  id: "tabs",
  defaultValue: "overview",
  tabs: [
    { value: "overview", label: "Overview", content: "Deployment health is stable." },
    { value: "history", label: "History", content: "Six releases shipped this month." },
    { value: "settings", label: "Settings", content: "Notification settings are locked.", disabled: true },
  ],
} satisfies {
  id: string;
  defaultValue: string;
  tabs: Array<{ value: string; label: string; content: string; disabled?: boolean }>;
};
 
import { Tabs } from "@grassroot/ui-react";
 
export default function TabsDemo() {
  return (
    <div>
      <Tabs {...tabsFixture} />
    </div>
  );
}

<script setup lang="ts">
import { Tabs } from "@grassroot/ui-vue";
const tabsFixture = {
  id: "tabs",
  defaultValue: "overview",
  tabs: [
    { value: "overview", label: "Overview", content: "Deployment health is stable." },
    { value: "history", label: "History", content: "Six releases shipped this month." },
    { value: "settings", label: "Settings", content: "Notification settings are locked.", disabled: true },
  ],
} satisfies {
  id: string;
  defaultValue: string;
  tabs: Array<{ value: string; label: string; content: string; disabled?: boolean }>;
};
 
</script>
 
<template>
  <div>
    <Tabs :tabs="tabsFixture.tabs" :default-value="tabsFixture.defaultValue" />
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootTabs } from "@grassroot/ui-angular";
const tabsFixture = {
  id: "tabs",
  defaultValue: "overview",
  tabs: [
    { value: "overview", label: "Overview", content: "Deployment health is stable." },
    { value: "history", label: "History", content: "Six releases shipped this month." },
    { value: "settings", label: "Settings", content: "Notification settings are locked.", disabled: true },
  ],
} satisfies {
  id: string;
  defaultValue: string;
  tabs: Array<{ value: string; label: string; content: string; disabled?: boolean }>;
};
 
@Component({
  selector: "app-tabs-demo",
  standalone: true,
  imports: [GrassrootTabs],
  template: `
    <div>
      <grassroot-tabs [tabs]="tabs" [value]="fixture.defaultValue" />
    </div>
  `,
})
export class TabsDemoComponent {
  protected readonly fixture = tabsFixture;
  protected readonly tabs = [...tabsFixture.tabs];
}
 
export default TabsDemoComponent;

<script lang="ts">
  import { Tabs } from "@grassroot/ui-svelte";
  const tabsFixture = {
    id: "tabs",
    defaultValue: "overview",
    tabs: [
      { value: "overview", label: "Overview", content: "Deployment health is stable." },
      { value: "history", label: "History", content: "Six releases shipped this month." },
      { value: "settings", label: "Settings", content: "Notification settings are locked.", disabled: true },
    ],
  } satisfies {
    id: string;
    defaultValue: string;
    tabs: Array<{ value: string; label: string; content: string; disabled?: boolean }>;
  };
 
  </script>
 
<div>
  <Tabs tabs={tabsFixture.tabs} defaultValue={tabsFixture.defaultValue} />
</div>

/** @jsxImportSource solid-js */
import { Tabs } from "@grassroot/ui-solid";
const tabsFixture = {
  id: "tabs",
  defaultValue: "overview",
  tabs: [
    { value: "overview", label: "Overview", content: "Deployment health is stable." },
    { value: "history", label: "History", content: "Six releases shipped this month." },
    { value: "settings", label: "Settings", content: "Notification settings are locked.", disabled: true },
  ],
} satisfies {
  id: string;
  defaultValue: string;
  tabs: Array<{ value: string; label: string; content: string; disabled?: boolean }>;
};
 
export default function TabsDemo() {
  return (
    <div>
      <Tabs tabs={tabsFixture.tabs} defaultValue={tabsFixture.defaultValue} />
    </div>
  );
}