From 008b45729c85902c5403e4ac45b4a0c24a9b19aa Mon Sep 17 00:00:00 2001
From: afterdusk <afterdusk@users.noreply.github.com>
Date: Fri, 30 Apr 2021 16:53:36 +0800
Subject: [PATCH] Add tabs

---
 src/App.tsx       | 13 +++++----
 src/ui/Header.tsx |  4 +--
 src/ui/Tabs.tsx   | 73 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 src/ui/Tabs.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6b8509b..87ce9ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import {
 import FormatConverter from "./converter/FormatConverter";
 import Footer from "./ui/Footer";
 import Header from "./ui/Header";
+import Tabs from "./ui/Tabs";
 
 const Wrapper = styled.div`
   width: 100%;
@@ -46,11 +47,13 @@ const App: FC = (): ReactElement => {
   return (
     <Wrapper>
       <Header />
-      <FormatConverter {...FP32} />
-      <FormatConverter {...FP64} />
-      <FormatConverter {...FP16} />
-      <FormatConverter {...BF16} />
-      <FormatConverter {...TF32} />
+      <Tabs>
+        <FormatConverter {...FP32} />
+        <FormatConverter {...FP64} />
+        <FormatConverter {...FP16} />
+        <FormatConverter {...BF16} />
+        <FormatConverter {...TF32} />
+      </Tabs>
       <Footer />
     </Wrapper>
   );
diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
index a76db55..0dd15bd 100644
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -11,10 +11,10 @@ const Title = styled.h1`
   font-size: 2.4rem;
 `;
 
-const Footer: FC = (): ReactElement => (
+const Header: FC = (): ReactElement => (
   <Wrapper>
     <Title>{APP_TITLE}</Title>
   </Wrapper>
 );
 
-export default Footer;
+export default Header;
diff --git a/src/ui/Tabs.tsx b/src/ui/Tabs.tsx
new file mode 100644
index 0000000..e51980a
--- /dev/null
+++ b/src/ui/Tabs.tsx
@@ -0,0 +1,73 @@
+import React, { Children, FC, ReactElement, useState } from "react";
+import styled from "styled-components";
+
+import { BACKGROUND_COLOR } from "../constants";
+
+const Wrapper = styled.header`
+  width: 100%;
+  min-width: 50rem; // TODO: Handle this more elegantly
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const TabBar = styled.div``;
+
+const TabButton = styled.button`
+  padding: 0.4rem 0.8rem;
+  margin: 0.6rem;
+
+  font-size: 1.8rem;
+  font-weight: bold;
+  background-color: transparent;
+  color: white;
+  border-style: solid;
+  border-radius: 0.4rem;
+  border-color: white;
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    background-color: white;
+    color: ${BACKGROUND_COLOR};
+  }
+`;
+
+// child component must have name attribute for tab button
+interface TabProps {
+  name: string;
+}
+
+interface TabsProps {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+}
+
+const Tabs: FC<TabsProps> = (props: TabsProps): ReactElement => {
+  const [active, setActive] = useState(0);
+
+  // TODO: Consider implementing lazy-loading
+  const onClick = (index: number) => {
+    setActive(index);
+  };
+
+  return (
+    <Wrapper>
+      <TabBar>
+        {Children.map(props.children, (c, i) => (
+          <TabButton
+            key={i}
+            className={i === active ? "active" : ""}
+            onClick={() => onClick(i)}
+          >
+            {c.props.name}
+          </TabButton>
+        ))}
+      </TabBar>
+      {Children.toArray(props.children)[active]}
+    </Wrapper>
+  );
+};
+
+export default Tabs;