Tabs.tsx

import React, { useState } from "react";
import styled from "styled-components";

export const Tabs: React.FC<{
  disabled?: boolean;
  titles: string[];
  children: React.ReactNodeArray;
}> = p => {
  if (p.disabled) {
    return <>{p.children}</>;
  }

  const [index, setIndex] = useState(0);
  const current = React.Children.toArray(p.children)[index];
  const tabs = p.titles.map((tab, i) => (
    <_tab
      key={tab}
      role="button"
      isSelected={i === index}
      onClick={() => setIndex(i)}
    >
      {tab}
    </_tab>
  ));

  return (
    <>
      <_tabs>{tabs}</_tabs>
      <_content>{current}</_content>
    </>
  );
};

const _tabs = styled.div``;

const _tab = styled.div<{ isSelected?: boolean }>``;

const _content = styled.div``;