✨ feat: Tab Common

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