✨ feat: Tab Common

src/components/common/TabCommon/TabCommon.module.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/utilities';
+
+.tabCommon {
+    @apply spacing-horizontal;
+}

src/components/common/TabCommon/TabCommon.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react"
+import s from './TabCommon.module.scss'
+
+import TabItem from './TabItem/TabItem'
+
+interface TabCommonProps {
+
+}
+
+const TabCommon = ({ } : TabCommonProps) => {
+    const [item1Active, setItem1Active] = useState(true);
+    const [item2Active, setItem2Active] = useState(false);
+    const [item3Active, setItem3Active] = useState(false);
+
+    const toggleItem1 = () => {
+        setItem1Active(true)
+
+        setItem2Active(false)
+        setItem3Active(false)
+    }
+    const toggleItem2 = () => {
+        setItem2Active(true)
+
+        setItem1Active(false)
+        setItem3Active(false)
+    }
+    const toggleItem3 = () => {
+        setItem3Active(true)
+
+        setItem1Active(false)
+        setItem2Active(false)
+    }
+
+    return (
+        <div className={s.tabCommon}>
+            <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
+            <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
+            <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
+        </div>
+    )
+}
+
+export default TabCommon;

src/components/common/TabCommon/TabItem/TabItem.module.scss

@@ -0,0 +1,28 @@
+@import '../../../../styles/utilities';
+
+.tabItem {
+    @apply font-bold;
+    margin-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+
+    &.active {
+        border-bottom: 2px solid #2DC86E;
+    }
+}
+
+.tabItemActive {
+    @apply font-bold;
+    margin-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #2DC86E;
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+}

src/components/common/TabCommon/TabItem/TabItem.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react"
+import s from './TabItem.module.scss'
+
+interface TabItemProps {
+    active?: boolean;
+    target?: any;
+    children?: string;
+}
+
+const TabItem = ({ active, children } : TabItemProps) => {
+    return (
+        <span className={active ? s.tabItemActive : s.tabItem}>
+            {children}
+        </span>
+    )
+}
+
+export default TabItem;