Tabs

'use client';
import { useState } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@mbsw/ui';
import { Plus } from 'lucide-react';
import { Icon } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['Tab1', 'Tab2', 'Tab3'];
  return (
    <Tabs
      value={value}
      onValueChange={setValue}
      style={{
        width: 'fit-content',
        maxWidth: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <TabsList aria-label={"Example tabs"}>
        {items.map((label, index) => (
          <TabsTrigger
            key={index}
            value={String(index)}
            disabled={settings.disabled}
            leading={
              settings.leadingIcon ? (
                <Icon icon={Plus} size="sm" decorative />
              ) : undefined
            }
          >
            {label}
          </TabsTrigger>
        ))}
      </TabsList>
      {items.map((_, index) => (
        <TabsContent key={index} value={String(index)} />
      ))}
    </Tabs>
  );
}