Tabs

Installation

npx gbs-add-block@latest -a Tabs

A simple and accessible tab interface component built with React. It supports dynamic content rendering, disabled tabs, and customizable styles.

Props

TabsProps

Prop	Type	Description
tabs	TabItem[]	An array of tab definitions. Each item must have an id and label.
defaultTabId	string	The ID of the tab that should be active initially. Defaults to the first tab.
renderContent	(activeTabId: string) => ReactNode	A render function to display content based on the active tab.
onChange	(tabId: string) => void	Callback fired when the tab changes.
className	string	Additional classes to apply to the root container.

Tab Item

Property	Type	Description
id	string	Unique identifier for the tab.
label	string	Display text for the tab.
disabled	boolean	Whether the tab is disabled.

Usage Example

import { TabItem, Tabs } from "@/component-lib/tabs";

export default function TabsWrapper() {
  const tabs: TabItem[] = [
    { id: "total", label: "Total" },
    { id: "transaction", label: "Transaction" },
    { id: "day-sale", label: "Day Sale" },
    { id: "inactive", label: "Inactive Tab", disabled: true },
  ];

  const renderContent = (activeTabId: string) => {
    switch (activeTabId) {
      case "total":
        return <div>Total content goes here...</div>;
      case "transaction":
        return <div>Transaction content goes here...</div>;
      case "day-sale":
        return <div>Day Sale content goes here...</div>;
      default:
        return <div>No content available</div>;
    }
  };

  const handleTabChange = (tabId: string) => {
    console.log(`Tab changed to: ${tabId}`);
  };

  return (
    <Tabs
      tabs={tabs}
      defaultTabId="day-sale"
      renderContent={renderContent}
      onChange={handleTabChange}
    />
  );
}