Tabs

import { Tabs, type TabItem } from "@grassroot/ui-react";
 
const tabs: TabItem[] = [
  { value: "overview", label: "Overview", content: "Service is healthy." },
  { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
];
 
<Tabs tabs={tabs} defaultValue="overview" />

<script setup lang="ts">
import { Tabs } from "@grassroot/ui-vue";
 
const tabs: TabItem[] = [
  { value: "overview", label: "Overview", content: "Service is healthy." },
  { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
];
</script>
 
<template>
  <Tabs :tabs="tabs" default-value="overview" />
</template>

import { Component } from "@angular/core";
import { GrassrootTabs } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootTabs],
  template: `
    <grassroot-tabs [tabs]="tabs" defaultValue="overview" />
  `,
})
export class ExampleComponent {
  readonly tabs: TabItem[] = [
    { value: "overview", label: "Overview", content: "Service is healthy." },
    { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
  ];
}

<script lang="ts">
  import { Tabs } from "@grassroot/ui-svelte";
 
  const tabs: TabItem[] = [
    { value: "overview", label: "Overview", content: "Service is healthy." },
    { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
  ];
</script>
 
<Tabs tabs={tabs} defaultValue="overview" />

import { Tabs } from "@grassroot/ui-solid";
 
const tabs: TabItem[] = [
  { value: "overview", label: "Overview", content: "Service is healthy." },
  { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
];
 
export function Example() {
  return (
    <>
      <Tabs tabs={tabs} defaultValue="overview" />
    </>
  );
}