From 7fcea39572e3c0227e12d3df753a086ce958e2c3 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Wed, 8 Sep 2021 09:58:06 +0700
Subject: [PATCH 1/2] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabCommon.tsx                   | 2 +-
 .../TabCommon/{ => components}/TabItem/TabItem.module.scss      | 0
 .../common/TabCommon/{ => components}/TabItem/TabItem.tsx       | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/common/TabCommon/{ => components}/TabItem/TabItem.module.scss (100%)
 rename src/components/common/TabCommon/{ => components}/TabItem/TabItem.tsx (100%)

diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index b837004d6..691b1d026 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,7 +1,7 @@
 import React, { RefObject, useEffect } from "react"
 import s from './TabCommon.module.scss'
 
-import TabItem from './TabItem/TabItem'
+import TabItem from './components/TabItem/TabItem'
 
 interface TabCommonProps {
     tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.module.scss
rename to src/components/common/TabCommon/components/TabItem/TabItem.module.scss
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/components/TabItem/TabItem.tsx
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.tsx
rename to src/components/common/TabCommon/components/TabItem/TabItem.tsx

From e21fc5ee303dadd4757c9b569947a8f19a338fe9 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Wed, 8 Sep 2021 09:59:40 +0700
Subject: [PATCH 2/2] :sparkles: feat: Tab Common

---
 .../components/TabPane/TabPane.module.scss    | 23 +++++++++++++++++++
 .../TabCommon/components/TabPane/TabPane.tsx  | 20 ++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/common/TabCommon/components/TabPane/TabPane.module.scss
 create mode 100644 src/components/common/TabCommon/components/TabPane/TabPane.tsx

diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.module.scss b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
new file mode 100644
index 000000000..6904a6acb
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
@@ -0,0 +1,23 @@
+@import '../../../../../../styles/utilities';
+
+.tabPane {
+    @apply hidden;
+    animation-duration: 0.6s;
+    animation-name: appear;
+    @keyframes appear {
+        from {
+            margin-left: 100%;
+            width: 200%;
+        }
+        
+        to {
+            margin-left: 0%;
+            width: 100%;
+        }
+    }
+    
+
+    &.active {
+        @apply block;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
new file mode 100644
index 000000000..3b39291b7
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -0,0 +1,20 @@
+import classNames from "classnames"
+import React from "react"
+import s from './TabPane.module.scss'
+
+interface TabPaneProps {
+    active: string;
+    children?: React.ReactNode;
+}
+
+const TabPane = ({ active="", children } : TabPaneProps) => {
+    return (
+        <section className={classNames(s.tabPane, {
+            [s[active]] : active
+        })}>
+            {children}
+        </section>
+    )
+}
+
+export default TabPane
\ No newline at end of file