Tabs Component

The Tabs component in React is designed to create a tabbed interface, allowing users to switch between different content sections within the same view. It's accompanied by the TabItem subcomponent for individual tab labels.

Features

• Dynamic tabbed interface with switchable content.
• Customizable tab appearance and active state styling.
• Supports multiple content sections within the same component.

TabProps

Properties for each tab item.

Prop	Type	Description
isActive	boolean	Indicates if the tab is currently active.
label	string	Text label for the tab.
onSelect	() => void	Function to handle tab selection.

TabItem

Represents individual tab labels.

Prop	Type	Description
label	string	Text label for the tab item.
content	React.ReactNode	Content to display when the tab is active.

TabsProps

Properties for the Tabs component.

Prop	Type	Description
items	TabItem[]	Array of TabItem to render as tabs.

Component

TabItem

Renders individual tab labels.

Tabs

Main component rendering the tabbed interface.

import React, { useState } from "react";
import classnames from "classnames";

// import TabItem from './TabItem';/
// import { TabsProps } from '../../types/type';
interface TabProps {
  isActive: boolean;
  label: string;
  onSelect: () => void;
}
interface TabItem {
  label: string;
  content: React.ReactNode;
}

interface TabsProps {
  items: TabItem[];
}
const TabItem: React.FC<TabProps> = ({ isActive, label, onSelect }) => {
  return (
    <li
      className={classnames("px-2 py-3 cursor-pointer text-[#9E9E9E]", {
        "border-b-2 border-b-[#FC8A2E] text-[#FC8A2E]": isActive,
      })}
      onClick={onSelect}
    >
      {label}
    </li>
  );
};

const Tabs: React.FC<TabsProps> = ({ items }) => {
  const [activeTab, setActiveTab] = useState < string > items[0].label;

  return (
    <div className=" ">
      <ol className="gap-4 border-b font-medium flex flex-row px-2">
        {items.map((item) => (
          <TabItem
            key={item.label}
            isActive={item.label === activeTab}
            label={item.label}
            onSelect={() => setActiveTab(item.label)}
          />
        ))}
      </ol>
      <div className="tab-content p-4">
        {items.map((item) => {
          if (item.label === activeTab) {
            return <div key={item.label}>{item.content}</div>;
          }
          return null;
        })}
      </div>
    </div>
  );
};

export default Tabs;

Usage

Ideal for creating sections in a UI where users can switch between different views or content areas without navigating away from the page.

Example Usage

import Tabs from "./path/to/Tabs";

const MyComponent = () => {
  const tabItems = [
    { label: "Tab 1", content: <div>Content 1</div> },
    { label: "Tab 2", content: <div>Content 2</div> },
    // ... more tabs
  ];

  return <Tabs items={tabItems} />;
};

Styling

• Styled using Tailwind CSS. Customize by altering or adding Tailwind classes.
• Use the isActive prop in TabItem to style the active state differently.

Notes

• Ensure that each TabItem has a unique label, as it's used as the key and for determining the active tab.
• The component structure allows for flexibility in content rendering, making it adaptable to various UI requirements.

---

This documentation provides an overview of the Tabs component and its subcomponent TabItem, detailing their features, props, and usage. Adapt the implementation and styling according to your project's needs.