open-index/open-npm huggingface dataset:
npm package: @koder1431/rate-limiter
Description: A reliable rate limiter for Node.js with atomic Redis operations and configurable failover.
Latest version: 0.1.0

# rate-limiter

A reliable rate limiter for Node.js with atomic Redis operations and configurable failover. Never fails silently.

## Install
```bash
npm install @koder1431/rate-limiter
```

## Usage
```ts
import { counter } from '@koder1431/rate-limiter'
import { createClient } from 'redis'

const redis = createClient()
await redis.connect()

const limiter = counter({
  redis,
  limit: 100,
  window: 60, // seconds
})

app.use('/api', limiter.middleware())
```

## Algorithms

**counter** — fixed window. Simple and cheap. Best for most cases.

**bucket** — token bucket. Handles bursts gracefully. Better for APIs with variable traffic.

## Failover

When Redis is unavailable, koder1431 decide what happens:
```ts
const limiter = counter({
  redis,
  limit: 100,
  window: 60,
  onError: 'pass',   // pass | block | memory
})
```

- `pass` — let all requests through
- `block` — reject all requests
- `memory` — fall back to in-memory limiting

## Response headers

Every response includes standard headers per RFC 6585:
```
RateLimit-Limit: 100
RateLimit-Remaining: 42
RateLimit-Reset: 1711580400
Retry-After: 30
```

## Custom key

By default limits by IP. Pass a custom key generator:
```ts
const limiter = counter({
  redis,
  limit: 100,
  window: 60,
  key: (req) => req.user.id,
})
```

## License

MIT
npm package: @kodesign/ability-introduction-block
Description: 产品能力介绍
Author: dtux
Latest version: 1.3.13

# ability-introduction

简介：产品能力介绍

产品能力介绍

![截图](https://gw.alicdn.com/tfs/TB1T_OutDtYBeNjy1XdXXXXyVXa-2458-1186.png)
npm package: @kodesign/area-stack-chart-block
Description: 叠加面积图
Author: dtux
Latest version: 1.3.13

# area-stack-chart

简介：叠加面积图

![截图](https://img.alicdn.com/tfs/TB13crWidfJ8KJjy0FeXXXKEXXa-1754-994.png)
npm package: @kodesign/bar-line-chart-block
Description: 简介：折柱混合图
Author: dtux
Latest version: 1.3.13

# bar-line-chart

简介：折柱混合图

![截图](https://img.alicdn.com/tfs/TB1Gd7jgeOSBuNjy0FdXXbDnVXa-2136-708.png)
npm package: @kodesign/brand-display-block
Description: 品牌列表展示
Author: dtux
Latest version: 1.3.13

# brand-display

简介：品牌列表展示

![截图](https://img.alicdn.com/tfs/TB1_IMuaAyWBuNjy0FpXXassXXa-2306-1244.png)
npm package: @kodesign/brand-list-block
Description: 展示品牌列表
Author: dtux
Latest version: 1.3.13

# brand-list

简介：品牌列表

展示品牌列表

![截图](https://img.alicdn.com/tfs/TB1_tflieGSBuNjSspbXXciipXa-1234-487.png)
npm package: @kodesign/change-password-form-block
Description: 简介：修改密码表单
Author: dtux
Latest version: 1.3.13

# change-password-form

简介：修改密码表单

![截图](https://img.alicdn.com/tfs/TB1Y.8yXHGYBuNjy0FoXXciBFXa-1212-490.png)
npm package: @kodesign/circle-progress-block
Description: 环形进度条
Author: dtux
Latest version: 1.3.13

# circle-progress

简介：环形进度条

![截图](https://img.alicdn.com/tfs/TB1xOKYcwmTBuNjy1XbXXaMrVXa-2352-522.png)
npm package: @kodesign/ko-react-redux
Description: dtux
Latest version: 1.5.0




## 项目说明
1、 使用技术
```text
 热更新、ES6/7、scss、bable7,Router4、react16、redux、webpack4、async／await、前端node服务器，按需加载...
```

2、 安装依赖包。
```
npm install  或者cnpm install 或者yarn(推荐)

npm install -g ko-script 

```

3、运行脚手架。
 ```js
 1.ko dll  //生成动态链接库文件

 1.ko dev //启动开发环境

 2.ko build //打包静态文件

 ```

4、ko-script  详细使用 [参考](https://www.npmjs.com/package/ko-script)
npm package: @kodesign/layout-blank
Description: 完全空白的布局，通常用来做首页、产品介绍或者登陆页面。推荐使用登陆页分类下的区块。
Author: ICE Team
Latest version: 1.10.0

# blank-layout

简介：空白布局

空白的布局

![截图](https://img.alicdn.com/tfs/TB1T65abVOWBuNjy0FiXXXFxVXa-2840-1596.png)
npm package: @kodesign/tab-dialog-block
Description: 标签内容弹窗
Author: dtux
Latest version: 1.3.13

# tab-dialog

简介：标签内容弹窗

标签内容弹窗

![截图](https://img.alicdn.com/tfs/TB19AF4gOqAXuNjy1XdXXaYcVXa-1262-812.png)
npm package: @kodex-data/hardhat-ipfs
Description: Hardhat TypeScript plugin for using IPFS
Author: WizardsOrb
Latest version: 0.0.1-rc.3

# Hardhat IPFS Documentation

## Overview

Hardhat IPFS is a plugin for Hardhat, a popular development environment for Ethereum smart contracts. This plugin allows you to easily integrate IPFS (InterPlanetary File System) into your development workflow.

With Hardhat IPFS, you can upload and retrieve data to and from IPFS directly from your smart contracts or Hardhat tasks. This can be useful for various purposes such as storing large files, publishing metadata, or creating decentralized applications.

## Installation

To install Hardhat IPFS, use the following command:

```bash
yarn add @kodex-data/hardhat-ipfs
# or
npm install @kodex-data/hardhat-ipfs 
```

## Configuration

Once you have installed Hardhat IPFS, you need to configure it by adding the following line to the top of your `hardhat.config.ts` file:

```ts
import '@kodex-data/hardhat-ipfs'; 
```

This will register the IPFS plugin with Hardhat.

### IPFS Instance Configuration

By default, the IPFS client will be configured to use Infura. If you want to use a different IPFS node, you can configure it in your `hardhat.config.ts` file like so:

```ts
const config: HardhatUserConfig = {
  ipfs: {
    host: 'ipfs.example.com',
    port: 5001,
    protocol: 'https'
  },
  // ...
}
```

Replace `ipfs.example.com` with the hostname of your IPFS node, and adjust the `port` and `protocol` settings as necessary.

## Usage

Hardhat IPFS provides several utility functions that can be accessed through the `hre.ipfs` object.

### Adding Data to IPFS

To add data to IPFS, use the `addFolder` function. This function takes a local file or directory path, and uploads it to IPFS. It returns an array of `AddFolderResult` objects, each of which contains the CID of the added data.

```ts
const results = await hre.ipfs.addFolder('/path/to/data', '**/*')
console.log(results.map(r => r.cid.toString()))
```

The second argument to `addFolder` is an optional glob pattern, which can be used to select specific files within the directory.

### Retrieving Data from IPFS

To retrieve data from IPFS, use the `getData` function. This function takes a CID or string, and returns the data stored in IPFS as a string.

```ts
const cid = 'QmWzHm1ZhymhMNUZTzT8WJ7RnRgTR9XhNEKv62Dahx2CYT'
const data = await hre.ipfs.getData(cid)
console.log(data)
```

### Storing Data in IPFS as a DAG

To store data in IPFS as a DAG (directed acyclic graph), use the `putDag` function. This function takes an object containing the data you want to store, and returns the CID of the stored DAG.

```ts
const data = { foo: 'bar' }
const cid = await hre.ipfs.putDag(data)
console.log(cid.toString())
```

### Retrieving a DAG from IPFS

To retrieve a DAG from IPFS, use the `getDag` function. This function takes a CID or string, and returns the DAG stored in IPFS as a `GetResult` object.

```ts
const cid = 'QmWzHm1ZhymhMNUZTzT8WJ7RnRgTR9XhNEKv62
```
npm package: @kodex-data/multicall
Description: `@kodex-data/multicall` is a JavaScript library that allows you to batch multiple Ethereum read-only calls into a single request, reducing the number of RPC calls and improving performance. It supports the `eth_call` method and the `multicall` contract, w
Latest version: 0.0.1-rc.11

# @kodex-data/multicall

`@kodex-data/multicall` is a JavaScript library that allows you to batch multiple Ethereum read-only calls into a single request, reducing the number of RPC calls and improving performance. It supports the `eth_call` method and the `multicall` contract, which is a gas-efficient contract that enables multiple read-only calls in a single transaction.

## Installation

To install `@kodex-data/multicall`, run the following command in your project directory:

```shell
yarn add @kodex-data/multicall
# or
npm install @kodex-data/multicall
```

```typescript
import { MultiCall } from '@kodex-data/multicall'
```
npm package: @kodex-data/permit
Description: ERC20 permit helper forked from uniswap.
Latest version: 0.0.1-rc.6

# @kodex-data/permit

`@kodex-data/permit` is a helper package that provides ERC20 permit functionality. This package is a fork of the Uniswap protocol's package, and it provides a simple way to generate permit signatures for ERC20 tokens. By using this package, you can easily enable users to approve token transfers without the need for multiple transactions.

## Installation

You can install `@kodex-data/permit` using `yarn` or `npm`. Here's how you can do it:

```shell
yarn add @kodex-data/permit
# or
npm install @kodex-data/permit
```

## Usage

Once you have installed the package, you can import the `getPermitSignature` function from the package to generate a permit signature. Here's how you can use it:

```typescript
import { getPermitSignature } from '@kodex-data/permit'

// generate permit signature
const permitSignature = await getPermitSignature(
  provider, // the Ethereum provider
  tokenAddress, // the address of the ERC20 token
  ownerAddress, // the address of the token owner
  spenderAddress, // the address of the token spender
  value, // the amount of tokens that can be spent
  deadline, // the deadline for the permit in seconds since the Unix epoch
  nonce // a unique value that prevents replay attacks
)
```

This function returns a Promise that resolves to the permit signature as a string.
npm package: @kodex-data/prototypes
Description: A library of TypeScript prototypes that extend built-in types in JavaScript, providing additional functionality to make development easier and more efficient. This library includes prototypes for working with big numbers, Ethereum Virtual Machine (EVM) fu
Author: WizardsOrb
Latest version: 0.0.1-rc.7

# @kodex-data/prototypes

`@kodex-data/prototypes` is a library of TypeScript prototypes that extend built-in types in JavaScript, providing additional functionality to make development easier and more efficient. This library includes prototypes for working with big numbers, Ethereum Virtual Machine (EVM) functionality, content identifiers (CIDs), and dates.

## Installation

You can install `@kodex-data/prototypes` using either npm or yarn:

```shell
npm install @kodex-data/prototypes
```

or

```shell
yarn add @kodex-data/prototypes
```

## Usage

To use `@kodex-data/prototypes`, import the desired prototypes into your TypeScript file. For example, if you want to use prototypes for working with big numbers, EVM functionality, CIDs, and dates, you can use the following imports:

```typescript
import '@kodex-data/big-prototypes'
import '@kodex-data/evm-prototypes'
import '@kodex-data/cid-prototypes'
import '@kodex-data/date-prototypes'
```

This will give you access to all of the prototypes included in the library for these types.

## Prototypes

The prototypes included in `@kodex-data/prototypes` are:

* `Big`: prototypes for working with big numbers.
* `Evm`: prototypes for working with Ethereum Virtual Machine (EVM) functionality.
* `Cid`: prototypes for working with content identifiers (CIDs).
* `Date`: prototypes for working with dates.

Each of these types has specific functionality that can help simplify your development process. For more information on the individual prototypes, see the respective `README` files for each sub-library (`@kodex-data/big-prototypes`, `@kodex-data/evm-prototypes`, `@kodex-data/cid-prototypes`, `@kodex-data/date-prototypes`).
npm package: @kodex-react/ctx-ethers
Description: Provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.
Author: WizardsOrb
Latest version: 0.0.1-rc.5

# @kodex-react/ctx-ethers

The `@kodex-react/ctx-ethers` package provides a React context provider for the Ethers.js library, which allows you to interact with Ethereum smart contracts.

## Installation

To install `@kodex-react/ctx-ethers`, use `npm` or `yarn`:

```shell
npm install @kodex-react/ctx-ethers 
# or
yarn add @kodex-react/ctx-ethers 
```


## Usage

To use the EthersProvider in your app, wrap your application with it in your top-level component:

```tsx
import { EthersProvider } from '@kodex-react/ctx-ethers'

const App: React.FC = ({ children }) => {
  return <EthersProvider>
    {children}
  </EthersProvider>
}

export default App
```

By wrapping your app with the `EthersProvider`, the context will be available to all child components of your app.

## Accessing Ethers Context

Once you have wrapped your app with `EthersProvider`, you can access the context by importing the `useEthers` hook from `@kodex-react/ctx-ethers`:

```tsx
import { useEthers } from '@kodex-react/ctx-ethers'

const MyComponent: React.FC = () => {
  const { provider } = useEthers()

  // use the ethers object to interact with Ethereum
  // ...
}
```

`useEthers` returns an object with an `provider` property, which is an instance of the ethers library. This object can be used to interact with Ethereum and smart contracts.

## Example

Here's an example of how to use `@kodex-react/ctx-ethers` to interact with a smart contract:

```tsx
import { useEthers } from '@kodex-react/ctx-ethers'
import { useState } from 'react'
import MyContract from './MyContract.json'

const MyComponent: React.FC = () => {
  const { provider } = useEthers();
  const [result, setResult] = useState<number | undefined>(undefined);

  const handleButtonClick = async () => {
    if (!ethers) return

    const contract = new ethers.Contract(
      '0x1234567890123456789012345678901234567890',
      MyContract.abi,
      provider.getSigner(),
    )

    const result = await contract.myFunction()
    setResult(result)
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Call MyContract</button>
      <div>Result: {result}</div>
    </div>
  )
}
```
npm package: @kodex-react/hashicon-tsx
Description: `yarn add @kodex-react/hashicon-tsx` or `npm install @kodex-react/hashicon-tsx`
Author: WizardsOrb
Latest version: 0.0.1-rc.1

# @kodex-react/hashicon-tsx

`yarn add @kodex-react/hashicon-tsx` or `npm install @kodex-react/hashicon-tsx`

> Generates a beautiful representation of any string value.

React component for [@emeraldpay/hashicon](https://www.npmjs.com/package/@emeraldpay/hashicon)

## Install

Install with:

```shell
yarn add @kodex-data/hashicon-tsx
```

Install Original with:

```shell
npm install @emeraldpay/hashicon-react --save
```

## Usage

```js
import { Hashicon } from '@kodex-data/hashicon-tsx';

// something that you want to represent visually. For example ID of an object on the screen.
const value = "9dddff8f-be81-4c27-80c8-099327865f3f";

// icon is a <canvas> element
<Hashicon value={value}/>

// Same icon with 80px in size
<Hashicon value={value} size={89}/>
```

- https://github.com/WizardsOrb/hashicon-tsx
npm package: @kodex-react/window-ethereum
Description: `yarn add @kodex-react/window-ethereum` or `npm install @kodex-react/window-ethereum`
Author: WizardsOrb
Latest version: 0.0.1-rc.2

# @kodex-react/window-ethereum

`yarn add @kodex-react/window-ethereum` or `npm install @kodex-react/window-ethereum`

```ts
import '@kodex-react/window-ethereum'
import React from 'react'
//...
```
npm package: @kodey-ai/cli
Description: Kodey AI CLI
Author: Kodey AI
Latest version: 0.1.11

# Kodey AI CLI

A command-line interface for interacting with Kodey AI services

## Prerequisites

- Node.js >= 18.0.0
- Yarn package manager
- Kodey Account

## Installation

```bash
yarn global add @kodey-ai/cli
```

## Usage

### Prerequisites

# Retrieve Kodey.ai Team Credentials


1\. Navigate to and Sign Into Your Account <https://dashboard.kodey.ai/>

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/6fb9714f-acd2-43e6-9744-339373acb825/ascreenshot.jpeg?tl_px=0,209&br_px=2574,1648&force_format=jpeg&q=100&width=1120.0)


2\. Click "Settings" From your Selected Team

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/099cbb35-1829-4352-ac73-c740171f5c97/ascreenshot.jpeg?tl_px=0,419&br_px=2574,1858&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=51,559)


3\. Click "Git Settings"

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/33cedbbf-16db-4e06-b153-ca4c9356af0f/ascreenshot.jpeg?tl_px=0,76&br_px=2574,1515&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=801,277)


4\. Copy the Team Git Repository URL

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/77cb7c85-22ee-44ab-b9b8-c011954cca5d/ascreenshot.jpeg?tl_px=0,308&br_px=2574,1747&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=1007,277)


5\. Copy The Team Git Access Key

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/3133feaa-461f-4d5a-8dbc-4f9368fa5cb1/user_cropped_screenshot.jpeg?tl_px=0,419&br_px=2574,1858&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=607,308)


6\. Click this icon.

![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-25/59164ae4-3cec-432a-b007-f94592966684/user_cropped_screenshot.jpeg?tl_px=0,419&br_px=2574,1858&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=1004,307)


### Repository Management

```bash

# Clone or pull a repository
kodeyai repo:clone --url https://git-codecommit.region.amazonaws.com/v1/repos/myrepo --username ABCDEF --password 123456
```

```bash

# Push changes to a repository
kodeyai repo:push
```


## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @kodfolk/vue3-fathom
Description: Fathom Analytics plugin for Vue 3.
Author: Pierre Pavlov
Latest version: 1.0.7

# Fathom Analytics plugin for Vue 3
Use the excellent [Fathom Analytics](https://usefathom.com/) in your Vue project.  

This is mostly a simple wrapper for [fathom-client](https://github.com/derrickreimer/fathom-client). So if you want more control, you can use that directly.

## Installation
```sh
npm i @kodfolk/vue3-fathom
```

## Usage
```js
import { createApp } from 'vue';
import VueFathom from '@kodfolk/vue3-fathom';

const app = createApp({});

app.use(VueFathom, {
    siteID: 'your-site-id', // replace with your actual site id
    disabled: false, // set to true to disable tracking
    settings: {} // additional settings for Fathom
});
```
**Now you're up and running!** Nothing more needs to be done to track page views.

## Additional functionality
```js
// Track event
this.$fathom.trackEvent('eventName', { _value: 1 });

// DEPRECATED: Track goa
this.$fathom.trackGoal('eventName', 0);

// Enable tracking for user
this.$fathom.enableTrackingForMe();

// Block tracking for user
this.$fathom.blockTrackingForMe();

// Check if tracking is enabled for user
this.$fathom.isTrackingEnabled();
```
See [fathom-client](https://github.com/derrickreimer/fathom-client?tab=readme-ov-file#api-reference) for more information regarding the API or take a look in the [code](https://github.com/Kodfolk/vue3-fathom/blob/main/lib/main.js) for available methods.

## Contributing
Feel free to open an issue or submit a pull request if you find a bug or want to add a feature.
npm package: @kodiak-ui/babel-plugin
Description: A babel plugin that hoists jsx attributes.
Latest version: 1.0.18

# @kodiak-ui/babel-plugin

A babel plugin that hoists jsx attributes.

`@kodiak-ui/babel-plugin` is used to optimize `sx` attributes by hoisting anything that could be out of the render path.

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

Without options:

```json
{
  "plugins": ["@kodiak-ui"]
}
```

With options:

_Defaults Shown_

```js
{
  "plugins": [
    [
      "@kodiak-ui",
      {
          attributesToHoist: ["sx", "variants"]
      }
    ]
  ]
}
```

## Options

### `attributesToHoist`

An array of jsx attributes to hoist.

## Sample

```tsx
// Input
import { Box } from '@kodiak-ui/primitives'

function sxGenerator() {
  return {
    bg: 'green',
  }
}

function App() {
  const isTrue = true

  return (
    <div
      sx={{
        backgroundColor: 'blue',
        '&:hover': {
          color: 'lightgreen',
        },
      }}
    >
      This has a hotpink background.
      <div
        css={{ backgroundColor: isTrue ? 'red' : 'blue' }}
        sx={{
          color: isTrue ? 'red' : 'blue',
        }}
        onClick={() => null}
      >
        Another div that isn't hoisted
      </div>
      <Box
        variants={['var1', 'var2']}
        sx={{ background: 'blue' }}
        aria-label="a label"
      >
        A box
      </Box>
      <Box sx={sxGenerator()}>Pure functions are also hoisted</Box>
    </div>
  )
}

// Output
      ↓ ↓ ↓ ↓ ↓ ↓

import * as React from 'react'; // or a jsx pragma
import { Box } from '@kodiak-ui/primitives';

function sxGenerator() {
  return {
    bg: 'green'
  };
}

var _ref = {
  backgroundColor: 'blue',
  '&:hover': {
    color: 'lightgreen'
  }
};
var _ref2 = ['var1', 'var2'];
var _ref3 = {
  background: 'blue'
};

var _ref4 = sxGenerator();

function App() {
  const isTrue = true;
  return <div sx={_ref}>
      This has a hotpink background.
      <div css={{
      backgroundColor: isTrue ? 'red' : 'blue'
    }} sx={{
      color: isTrue ? 'red' : 'blue'
    }} onClick={() => null}>
        Another div that isn't hoisted
      </div>
      <Box variants={_ref2} sx={_ref3} aria-label="a label">
        A box
      </Box>
      <Box sx={_ref4}>Pure functions are also hoisted</Box>
    </div>;
}
```
npm package: @kodiak-ui/tabs
Description: Tabs hook and components
Author: Wesley Cole
Latest version: 0.2.42

# Kodiak UI Tabs

Easily render fully composable and styleable tabs in your UI.

```
npm install @kodiak-ui/tabs
yarn add @kodiak-ui/tabs
```

```ts
function TabsExample() {
  const tabsData = React.useMemo(function generateTabs() {
    return [
      {
        tab: 'Tab 1',
        panel: (
          <div>
            <h3>Testing</h3>
          </div>
        ),
      },
      { tab: 'Tab 2', panel: 'Tab 2' },
      { tab: 'Tab 3', panel: 'Tab 3' },
      { tab: 'Tab 4', panel: 'Tab 4' },
    ]
  }, [])

  const { tabs, tabPanels, selectedIndex } = useTabs({
    tabs: tabsData,
  })

  return (
    <Tabs sx={{ border: '1px solid', borderColor: 'gray.2' }}>
      <TabList aria-label="Describes the tabs">
        {tabs.map((props, index) => (
          <Tab
            key={index}
            {...props}
            sx={{
              color: selectedIndex === index ? 'primary' : 'text',
              position: 'relative',
              '::after': {
                bg: selectedIndex === index ? 'primary' : 'muted',
                bottom: 0,
                content: '""',
                height: selectedIndex === index ? '2px' : '1px',
                left: 0,
                position: 'absolute',
                right: 0,
                width: '100%',
              },
            }}
          />
        ))}
      </TabList>
      {tabPanels.map((props, index) => (
        <TabPanel key={index} {...props} sx={{ p: 4 }} />
      ))}
    </Tabs>
  )
}
```