diff --git a/.gitignore b/.gitignore
index 61386b73c..34232cff6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,5 @@ yarn-error.log*
# vercel
.vercel
+
+.eslintrc
diff --git a/next-env.d.ts b/next-env.d.ts
index c6643fda1..9bc3dd46b 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,3 +1,6 @@
///
///
///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/pages/index.tsx b/pages/index.tsx
index b78fb2629..5c010c4c2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,17 +4,8 @@ import { AccountNavigation, DeliveryItem, AccountPage } from 'src/components/mod
export default function Home() {
-
- const crumbs = [
- {link: "/", name: "Home"},
- {link: "/blogs", name: "Blog"},
- {link: "/product-list", name: "Product List"},
- {link: "/product-detail", name: "Product Detail"},
- ];
-
return (
<>
-
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index c744f1a2a..a2d47c1ed 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,73 +1,34 @@
-import React, { useState, RefObject, useEffect, useRef } from "react"
+import React, { RefObject, useEffect } from "react"
import s from './TabCommon.module.scss'
import TabItem from './TabItem/TabItem'
interface TabCommonProps {
- changeTabPane: (target:string) => void;
+ tabs: {ref:RefObject, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[];
+ defaultActiveTab: number;
+ sliderRef : RefObject;
+ slideToTab: (ref: any) => void;
}
-const TabCommon = ({ changeTabPane } : TabCommonProps) => {
- const active = "active", unActive = "";
- const [item1Active, setItem1Active] = useState(active);
- const [item2Active, setItem2Active] = useState(unActive);
- const [item3Active, setItem3Active] = useState(unActive);
-
- const item1 = useRef(null);
- const item2 = useRef(null);
- const item3 = useRef(null);
- const slider = useRef(null);
-
- function slide(ref: RefObject) {
- const width = ref.current.offsetWidth;
- const left = ref.current.offsetLeft;
-
- slider.current.style.width = (width-48).toString()+"px";
- slider.current.style.left = left.toString()+"px";
- }
-
- function toggleItem1():void {
- setItem1Active(active)
- changeTabPane("waiting")
-
- setItem2Active(unActive)
- setItem3Active(unActive)
- slide(item1)
- }
-
- function toggleItem2():void {
- setItem2Active(active)
- changeTabPane("delivering")
-
- setItem1Active(unActive)
- setItem3Active(unActive)
- slide(item2)
- }
- function toggleItem3():void {
- setItem3Active(active)
- changeTabPane("delivered")
-
- setItem1Active(unActive)
- setItem2Active(unActive)
- slide(item3)
- }
+const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
useEffect(() => {
- slide(item1);
+ slideToTab(tabs[defaultActiveTab].ref);
}, [])
return (
- -
- Wait for Comfirmation
-
- -
- Delivering
-
- -
- Delivered
-
-
+ {
+ tabs.map((tab) => {
+ return (
+ -
+ {tab.tabName}
+
+ )
+ })
+ }
+
+
)
}
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss
index 3d3b44604..bdbb0b66a 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.module.scss
+++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss
@@ -5,9 +5,16 @@
padding-top: 1.6rem;
padding-bottom: 1.6rem;
- &.active {
- @apply font-bold;
+ &:hover {
+ @apply cursor-pointer;
}
+}
+
+.tabItemActive {
+ @apply font-bold;
+ margin-right: 4.8rem;
+ padding-top: 1.6rem;
+ padding-bottom: 1.6rem;
&:hover {
@apply cursor-pointer;
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
index 62de3c595..4c0a7cf30 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.tsx
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -1,19 +1,16 @@
-import classNames from "classnames";
import React from "react"
import s from './TabItem.module.scss'
interface TabItemProps {
- active: string;
+ active: boolean;
children: string;
- onClick: () => void;
+ onClick: (tabIndex: number, tabPane: string) => void;
}
-const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
return (
-
+
{children}
)