## Introduction

### Overview
The Tabs Component is a customizable tab navigation system that allows you to create and manage dynamic tabs with associated content. The component is designed to be flexible, allowing you to easily integrate it into your React.js and Next.js projects.

### Features
- Create and manage multiple dynamic tabs.
- Customize tab appearance and behavior.
- Easily control which tab is initially active.
- Enable/disable tabs and add close buttons for tab removal.
- Supports different tab sizes and positions.

## Installation

### Prerequisites
Make sure you have Node.js and npm (Node Package Manager) installed on your system.

### Installation Steps
To install the Tabs Component for your `React` project, follow these steps:
1- Clone the repository and navigate to your project's directory.
2- Install the required dependencies by running the following command:

    npm instal

## Usage

### Importing the Component
To use the Tabs Component, import it into your file:

    import Tabs from 'path/Tabs';

### Creating Tabs Data
The component requires an array of tab objects to define the tabs and their content. Each object should contain the following properties:

- `key` (string): A unique identifier for the tab.
- `label` (string | React.ReactElement): The title of the tab, which can be a string or a React element.
- `disabled` (boolean, optional): Set to `true` to disable the tab. (Default: `false`)
- `closeable` (boolean, optional): Set to `true` to enable a close button on the tab. (Default: `false`)
- `children` (string | React.ReactElement, optional): The content to be displayed when the tab is selected.

Example data for items:

const items = [
  {
    key: '1',
    label: 'Tab 1',
    children: 'Content for Tab 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    children: 'Content for Tab 2',
  },
  // Add more tab objects as needed
];

### Rendering the Tabs Component
To render the tabs in your React.js component, use the `Tabs` component and pass the `items` array as a prop:

function YourComponent() {
  return (
    <div>
      <h1>Your Page Title</h1>
      <Tabs items={items} />
    </div>
  );
}

export default YourComponent;

### Customization
You can customize the appearance of the tabs by passing relevant props to the `Tabs` component. For instance, to change the default active tab:

<Tabs items={items} defaultActiveKey="2" />

Or to customize the tab size and position:

<Tabs items={items} size="large" position="bottom" />

You can also set custom styles:

const customStyles = {
    color: 'gray',
    activeColor: 'purple',
    // You can also add any any CSS proprieties
};

<Tabs items={items} style={customStyles} />

## Props

The `Tabs` component supports the following props:
- `items` (required): An array of objects representing the tabs and their content. Each object should contain the properties mentioned above.
- `defaultActiveKey` (string, optional): The key of the tab that should be active by default. (Default: The first tab in the `items` array)
- `size` (string, optional): The size of the tabs. Use `'small'`, `'middle'`, or `'large'`. (Default: `'small'`)
- `position` (string, optional): The position of the tabs. Use `'top'`, `'bottom'`, `'left'`, or `'right'`. (Default: `'top'`)
- `centered` (boolean, optional): Set to `true` to center-align the tabs. (Default: `false`)
- `id` (string, optional): Add ID for root element
- `className` (string, optional): Custom CSS styles for the tabs by using `tailwindCss` or add class for root element
* `style` (object, optional): Custom CSS styles for the tabs. You can define the following properties:
- `color` (string, optional): The text color of inactive tabs. (Default: `'black'`)
- `activeColor` (string, optional): The text color of the active tab. (Default: `'blue'`)
- And also you can add any `CSS` proprieties

## Guidelines for Contributions
We welcome contributions to enhance the functionality and usability of the Tabs Component. If you would like to contribute, please follow these guidelines:
- Fork the repository and create a new branch for your changes.
- Commit your changes with clear commit messages.
- Submit a pull request detailing your changes and the problem they solve.

## Troubleshooting

### Common Issues
- **Tabs not rendering correctly**: Check if you have - correctly passed the items array to the Tabs component.
- **Tabs not switching content**: Ensure that the key property in each tab object is unique.

### How to Seek Help
If you encounter any issues or need help using the Tabs Component, you can:
- Create a GitHub issue in the project repository.
- Seek help from the community.

## Technologies Used
- ➡️ [Next.js](url('https://nextjs.org/docs')).
- ➡️ [TypeScript](url('https://www.typescriptlang.org/docs/')).
- ➡️ [classNames](url('https://www.npmjs.com/package/classnames')).
- ➡️ [React-icons](url('https://react-icons.github.io/react-icons/')).
- ➡️ [TailwindCss](url('https://tailwindcss.com/')).
- ➡️ [Eslint](url('https://www.npmjs.com/package/eslint')).
- ➡️ CSS3.