pdf-reader-web/components/Tabs/index.tsx

import React, { useState } from 'react';

import { SelectOptionType } from '../../constants/type';

import { Wrapper, BtnGroup, Btn } from './styled';

type Props = {
  options: SelectOptionType[];
  onChange: (selected: SelectOptionType) => void;
};

const Tabs: React.FC<Props> = ({
  options,
  onChange,
}: Props) => {
  const [selectedIndex, setSelect] = useState(0);

  const handleClick = (index: number): void => {
    setSelect(index);
    onChange(options[index]);
  };

  return (
    <Wrapper>
      <BtnGroup>
        {
          options.map((ele, index) => (
            <Btn
              key={ele.key}
              isActive={index === selectedIndex}
              onClick={(): void => { handleClick(index); }}
            >
              {ele.content}
            </Btn>
          ))
        }
      </BtnGroup>
      {options[selectedIndex] ? options[selectedIndex].child : null}
    </Wrapper>
  );
};

export default Tabs;