From 1c9e1f4ef8c7bd624616723836f26cbbb1c32984 Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <biesiadajakub@icloud.com>
Date: Sat, 11 Jul 2020 21:25:18 +0200
Subject: [PATCH] chore: prepare update

---
 src/popup/components/Tabs/Tabs.scss | 40 +++++++++++------------
 src/popup/components/Tabs/index.tsx | 50 ++++++++++++++++++-----------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/popup/components/Tabs/Tabs.scss b/src/popup/components/Tabs/Tabs.scss
index 39d1867..f9e22e2 100644
--- a/src/popup/components/Tabs/Tabs.scss
+++ b/src/popup/components/Tabs/Tabs.scss
@@ -1,6 +1,7 @@
 .tab-navigation {
   width: 80%;
-  height: 26px;
+  // height: 32px;
+  // padding: 3px;
   background-color: #efefef;
   border-radius: 13px;
   display: flex;
@@ -8,6 +9,23 @@
   position: relative;
   margin: 0 auto;
 
+  &__selector {
+    position: absolute;
+    border-radius: 11px;
+    // width: 100%;
+    background-color: #fff;
+    transition: left 300ms ease, background-color 200ms ease;
+    position: absolute;
+    height: 22px;
+    top: 2px;
+    left: 2px;
+
+    &--active {
+      background-color: #fff;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+    }
+  }
+
   &__item {
     flex: 1;
     display: flex;
@@ -33,30 +51,12 @@
     input {
       display: none;
 
-      & + label::before {
-        content: "";
-        left: 0;
-        z-index: -1;
-        border-radius: 11px;
-        width: 100%;
-        background-color: #fff0;
-        transition: background-color 200ms ease;
-        position: absolute;
-        height: 22px;
-        top: 0;
-      }
-
-      &:not(:checked) + label:active {
+      &:not(:checked) {
         opacity: 0.5;
       }
 
       &:checked {
         + label {
-          &::before {
-            background-color: #fff;
-            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
-          }
-
           &:active {
             transform: scale(0.95);
           }
diff --git a/src/popup/components/Tabs/index.tsx b/src/popup/components/Tabs/index.tsx
index 9f9171c..8440cf3 100644
--- a/src/popup/components/Tabs/index.tsx
+++ b/src/popup/components/Tabs/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 
 import { Tab } from '../../../shared/enums/Tab';
 
@@ -10,23 +10,35 @@ interface Props {
   onChange(value: Tab): void;
 }
 
-const Tabs: React.FC<Props> = ({ items, active, onChange }) => (
-  <nav className="tab-navigation">
-    {Object.entries(items).map(([key, value]) => (
-      <div className="tab-navigation__item" key={key}>
-        <input
-          name={name}
-          value={key}
-          type="radio"
-          id={key}
-          checked={active === key}
-          onChange={(e) => onChange(e.target.value as Tab)}
-        />
-
-        <label htmlFor={key}>{value}</label>
-      </div>
-    ))}
-  </nav>
-);
+const Tabs: React.FC<Props> = ({ items, active, onChange }) => {
+  const [position, setPosition] = useState(0);
+
+  const size = useMemo(() => 100, []);
+
+  return (
+    <nav className="tab-navigation">
+      <div
+        className="tab-navigation__selector"
+        style={{ width: size, left: size * Object.keys(items).indexOf(active) }}
+      />
+
+      {Object.entries(items).map(([key, value]) => (
+        <div className="tab-navigation__item" key={key}>
+          <input
+            name={name}
+            value={key}
+            type="radio"
+            id={key}
+            checked={active === key}
+            onClick={(e) => console.log(e.target)}
+            onChange={(e) => onChange(e.target.value as Tab)}
+          />
+
+          <label htmlFor={key}>{value}</label>
+        </div>
+      ))}
+    </nav>
+  );
+};
 
 export default Tabs;