@eureca/eureca-ui/src/components/Tabs/stories/icon-tabs.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { Box } from '@material-ui/core';
import { FiLayers, FiTarget, FiMic } from 'react-icons/fi';

import { IconTabs } from '..';

export default { title: 'Originals/Tabs', includeStories: [] };

const tabs = [
  <Box p={4}>Conteúdo online</Box>,
  <Box p={4}>Conteúdo presencial</Box>,
  <Box p={4}>Conteúdo entrevista</Box>,
];

const fasesOptions = [
  { value: 0, label: 'Online', icon: <FiLayers />, disabled: false },
  { value: 1, label: 'Presencial', icon: <FiTarget />, disabled: false },
  { value: 2, label: 'Entrevista', icon: <FiMic />, disabled: true },
];

export const IconTabsStory = () => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <IconTabs items={fasesOptions} current={activeTab} onChange={v => setActiveTab(v)}>
      {tabs[activeTab]}
    </IconTabs>
  );
};