Merge branch 'm4-sonnguyen' of github.com:KieIO/grocery-vercel-commerce into m5-datnguyen

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}[];

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;
+    }
+}

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