From 185601f002858a643c2beae4a60e516802d60c70 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 30 Aug 2021 16:46:52 +0700 Subject: [PATCH 1/7] :sparkles: feat: Breadcrumb Common --- .../BreadcrumbCommon.module.scss | 6 +++ .../BreadcrumbCommon/BreadcrumbCommon.tsx | 54 +++++++++++++++++++ .../BreadcrumbItem/BreadcrumbItem.tsx | 17 ++++++ .../BreadcrumbSeparator.tsx | 15 ++++++ 4 files changed, 92 insertions(+) create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss create mode 100644 src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss new file mode 100644 index 000000000..6741f386c --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss @@ -0,0 +1,6 @@ +@import '../../../styles/utilities'; + +.breadcrumbCommon { + @apply spacing-horizontal-left; + color: var(--text-base); +} \ No newline at end of file diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx new file mode 100644 index 000000000..8b36f7e50 --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import s from './BreadcrumbCommon.module.scss' + +import { useRouter } from 'next/router' + +import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' +import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' + +const BreadcrumbCommon = () => { + + const paths: string | any = { + "/": "Home", + "fresh-product-today" : "Fresh Product Today", + "product-list": "Product List", + "recipes-list": "Recipes List", + "blogs": "Blog", + "account": "Account", + "delivery&policy": "Delivery & Policy", + "product-detail": "Product Detail", + "recipes-detail": "Recipes Detail", + "blog-detail": "Blog Detail" + } + + const router = useRouter(); + let crumbs = router.route.split('/'); + + return ( +
+ + { + crumbs.map((crumb, i) => { + if (crumb === "") { + return + } + if (i === crumbs.length-1) { + return ( + + + + ) + } + return ( + + + + ) + }) + } +
+ ) + +} + +export default BreadcrumbCommon diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx new file mode 100644 index 000000000..9a501c93f --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import Link from 'next/link' + +interface BreadcrumbItemProps { + text: string; + href: string; +} + +const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { + return ( + + {text} + + ) +} + +export default BreadcrumbItem diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx new file mode 100644 index 000000000..c877e60bc --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface BreadcrumbSeparatorProps { + children: any; +} + +const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { + return ( + +  / {children} + + ) +} + +export default BreadcrumbSeparator From f8efe0accce6ebcae1b5b4b37011a8fe0835689e Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 30 Aug 2021 18:19:16 +0700 Subject: [PATCH 2/7] :sparkles: feat: Tab Common --- .../common/TabCommon/TabCommon.module.scss | 5 +++ src/components/common/TabCommon/TabCommon.tsx | 43 +++++++++++++++++++ .../TabCommon/TabItem/TabItem.module.scss | 28 ++++++++++++ .../common/TabCommon/TabItem/TabItem.tsx | 18 ++++++++ 4 files changed, 94 insertions(+) create mode 100644 src/components/common/TabCommon/TabCommon.module.scss create mode 100644 src/components/common/TabCommon/TabCommon.tsx create mode 100644 src/components/common/TabCommon/TabItem/TabItem.module.scss create mode 100644 src/components/common/TabCommon/TabItem/TabItem.tsx diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss new file mode 100644 index 000000000..b7ea32c04 --- /dev/null +++ b/src/components/common/TabCommon/TabCommon.module.scss @@ -0,0 +1,5 @@ +@import '../../../styles/utilities'; + +.tabCommon { + @apply spacing-horizontal; +} diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx new file mode 100644 index 000000000..c5715ab5b --- /dev/null +++ b/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 ( +
+ Wait for Comfirmation + Delivering + Delivered +
+ ) +} + +export default TabCommon; \ No newline at end of file diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss new file mode 100644 index 000000000..5bb3bfb15 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx new file mode 100644 index 000000000..814f84e3e --- /dev/null +++ b/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 ( + + {children} + + ) +} + +export default TabItem; \ No newline at end of file From 232e8a28eaa0e66289a26b7265122853a70caf83 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 31 Aug 2021 10:31:10 +0700 Subject: [PATCH 3/7] :sparkles: feat: Breadcrumbs Common --- .../BreadcrumbCommon/BreadcrumbCommon.tsx | 37 +++++++------------ .../BreadcrumbItem/BreadcrumbItem.tsx | 4 +- .../BreadcrumbSeparator.tsx | 2 +- 3 files changed, 16 insertions(+), 27 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index 8b36f7e50..2dca6b714 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -1,54 +1,43 @@ import React from 'react' import s from './BreadcrumbCommon.module.scss' -import { useRouter } from 'next/router' - import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' -const BreadcrumbCommon = () => { +interface BreadcrumbCommonProps { + crumbs: { link:string, name:string }[]; + showHomePage?: boolean; +} - const paths: string | any = { - "/": "Home", - "fresh-product-today" : "Fresh Product Today", - "product-list": "Product List", - "recipes-list": "Recipes List", - "blogs": "Blog", - "account": "Account", - "delivery&policy": "Delivery & Policy", - "product-detail": "Product Detail", - "recipes-detail": "Recipes Detail", - "blog-detail": "Blog Detail" +const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => { + if (showHomePage) { + crumbs.unshift({link: "/", name: "Home"}); } - - const router = useRouter(); - let crumbs = router.route.split('/'); - return (
- { crumbs.map((crumb, i) => { - if (crumb === "") { - return + if (i === 0) { + return ( + + ) } if (i === crumbs.length-1) { return ( - + ) } return ( - + ) }) }
) - } export default BreadcrumbCommon diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx index 9a501c93f..f807de555 100644 --- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -8,8 +8,8 @@ interface BreadcrumbItemProps { const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { return ( - - {text} + + {text} ) } diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx index c877e60bc..f84bc3a51 100644 --- a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx @@ -1,7 +1,7 @@ import React from 'react' interface BreadcrumbSeparatorProps { - children: any; + children?: React.ReactNode; } const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { From 0560a55a02152f9f1a156de7ff16207e5e4b44db Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 1 Sep 2021 09:02:39 +0700 Subject: [PATCH 4/7] :sparkles: feat: Tab Common --- .../common/TabCommon/TabCommon.module.scss | 12 ++++- src/components/common/TabCommon/TabCommon.tsx | 44 ++++++++++--------- .../TabCommon/TabItem/TabItem.module.scss | 24 +++------- .../common/TabCommon/TabItem/TabItem.tsx | 13 +++--- 4 files changed, 49 insertions(+), 44 deletions(-) diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss index b7ea32c04..9e5fbc1df 100644 --- a/src/components/common/TabCommon/TabCommon.module.scss +++ b/src/components/common/TabCommon/TabCommon.module.scss @@ -1,5 +1,15 @@ @import '../../../styles/utilities'; -.tabCommon { +.tabCommonOutSide { @apply spacing-horizontal; + + .tabCommon { + @apply flex; + position: relative; + border-bottom: 2px solid #FBFBFB; + padding-top: 1.6rem; + padding-bottom: 1.6rem; + width: 100%; + } } + diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx index c5715ab5b..d07cf06e8 100644 --- a/src/components/common/TabCommon/TabCommon.tsx +++ b/src/components/common/TabCommon/TabCommon.tsx @@ -8,35 +8,39 @@ interface TabCommonProps { } const TabCommon = ({ } : TabCommonProps) => { - const [item1Active, setItem1Active] = useState(true); - const [item2Active, setItem2Active] = useState(false); - const [item3Active, setItem3Active] = useState(false); + const active = "active", unActive = ""; - const toggleItem1 = () => { - setItem1Active(true) + const [item1Active, setItem1Active] = useState(active); + const [item2Active, setItem2Active] = useState(unActive); + const [item3Active, setItem3Active] = useState(unActive); - setItem2Active(false) - setItem3Active(false) + function toggleItem1():void { + setItem1Active(active) + + setItem2Active(unActive) + setItem3Active(unActive) } - const toggleItem2 = () => { - setItem2Active(true) + function toggleItem2():void { + setItem2Active(active) - setItem1Active(false) - setItem3Active(false) + setItem1Active(unActive) + setItem3Active(unActive) } - const toggleItem3 = () => { - setItem3Active(true) + function toggleItem3():void { + setItem3Active(active) - setItem1Active(false) - setItem2Active(false) + setItem1Active(unActive) + setItem2Active(unActive) } return ( -
- Wait for Comfirmation - Delivering - Delivered -
+
+
+ Wait for Comfirmation + Delivering + Delivered +
+
) } diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss index 5bb3bfb15..efb10f1f4 100644 --- a/src/components/common/TabCommon/TabItem/TabItem.module.scss +++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss @@ -1,28 +1,16 @@ @import '../../../../styles/utilities'; .tabItem { - @apply font-bold; - margin-right: 2rem; - padding-top: 1rem; - padding-bottom: 1rem; - - &:hover { - @apply cursor-pointer; - } + margin-right: 4.8rem; + padding-top: 1.6rem; + padding-bottom: 1.6rem; &.active { - border-bottom: 2px solid #2DC86E; + @apply font-bold; + border-bottom: 2px solid var(--primary); } -} - -.tabItemActive { - @apply font-bold; - margin-right: 2rem; - padding-top: 1rem; - padding-bottom: 1rem; - border-bottom: 2px solid #2DC86E; &:hover { @apply cursor-pointer; } -} \ No newline at end of file +} diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx index 814f84e3e..a889ee68b 100644 --- a/src/components/common/TabCommon/TabItem/TabItem.tsx +++ b/src/components/common/TabCommon/TabItem/TabItem.tsx @@ -1,15 +1,18 @@ -import React, { useState } from "react" +import classNames from "classnames"; +import React from "react" import s from './TabItem.module.scss' interface TabItemProps { - active?: boolean; - target?: any; + active: string; + target?: string; children?: string; } -const TabItem = ({ active, children } : TabItemProps) => { +const TabItem = ({ active = "", children } : TabItemProps) => { return ( - + {children} ) From 36deb17facc1d917657b25f12b03609efbd98147 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Wed, 1 Sep 2021 09:03:54 +0700 Subject: [PATCH 5/7] :sparkles: feat: Account Navigation --- .../AccountNavigation.module.scss | 5 ++ .../AccountNavigation/AccountNavigation.tsx | 50 +++++++++++++++++++ .../AccountNavigationItem.module.scss | 19 +++++++ .../components/AccountNavigationItem.tsx | 21 ++++++++ 4 files changed, 95 insertions(+) create mode 100644 src/components/modules/account/AccountNavigation/AccountNavigation.module.scss create mode 100644 src/components/modules/account/AccountNavigation/AccountNavigation.tsx create mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss create mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss new file mode 100644 index 000000000..22c885238 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss @@ -0,0 +1,5 @@ +@import '../../../../styles/utilities'; + +.accountNavigation { + @apply spacing-horizontal; +} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx new file mode 100644 index 000000000..fd289edc9 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -0,0 +1,50 @@ +import React, { useState } from "react" +import s from './AccountNavigation.module.scss' + +import AccountNavigationItem from './components/AccountNavigationItem' + +interface AccountNavigationProps { + +} + +const AccountNavigation = ({ } : AccountNavigationProps) => { + const active = "active", unActive = ""; + + const [item1Active, setItem1Active] = useState(active); + const [item2Active, setItem2Active] = useState(unActive); + const [item3Active, setItem3Active] = useState(unActive); + + function toggleItem1():void { + setItem1Active(active) + + setItem2Active(unActive) + setItem3Active(unActive) + } + function toggleItem2():void { + setItem2Active(active) + + setItem1Active(unActive) + setItem3Active(unActive) + } + function toggleItem3():void { + setItem3Active(active) + + setItem1Active(unActive) + setItem2Active(unActive) + } + return ( +
+
+ Customer Information +
+
+ Your Orders +
+
+ Favourites +
+
+ ) +} + +export default AccountNavigation \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss new file mode 100644 index 000000000..01fc0e1cc --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss @@ -0,0 +1,19 @@ +@import '../../../../../styles/utilities'; + +.accountNavigationItem { + @apply bg-gray; + width: 28rem; + padding: 1.2rem 0 1.2rem 1.6rem; + margin-bottom: 1.2rem; + + + &:hover { + @apply cursor-pointer; + } + + &.active { + background-color: #FBFBFB; + border-radius: 0 1.6rem 1.6rem 0; + border-left: 2px solid var(--primary); + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx new file mode 100644 index 000000000..47cd537f0 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import classNames from "classnames"; +import s from './AccountNavigationItem.module.scss' + +interface AccountNavigationItemProps { + children?: string; + active?: string; + target?: string; +} + +const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => { + return ( +
+ {children} +
+ ) +} + +export default AccountNavigationItem \ No newline at end of file From 7ece18782d43b680ed0a917829c2b7e07112d247 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:07:33 +0700 Subject: [PATCH 6/7] :sparkles: feat: Tab Common --- src/components/common/TabCommon/TabCommon.tsx | 50 +++++++++++++++---- .../common/TabCommon/TabItem/TabItem.tsx | 9 ++-- 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx index d07cf06e8..67fe107a6 100644 --- a/src/components/common/TabCommon/TabCommon.tsx +++ b/src/components/common/TabCommon/TabCommon.tsx @@ -1,46 +1,74 @@ -import React, { useState } from "react" +import React, { useState, RefObject, useEffect, useRef } from "react" import s from './TabCommon.module.scss' import TabItem from './TabItem/TabItem' interface TabCommonProps { - + changeTab: (target:string) => void; } -const TabCommon = ({ } : TabCommonProps) => { +const TabCommon = ({ changeTab } : 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) + changeTab("waiting") setItem2Active(unActive) setItem3Active(unActive) + slide(item1) } + function toggleItem2():void { setItem2Active(active) + changeTab("delivering") setItem1Active(unActive) setItem3Active(unActive) + slide(item2) } function toggleItem3():void { setItem3Active(active) + changeTab("delivered") setItem1Active(unActive) setItem2Active(unActive) + slide(item3) } + useEffect(() => { + slide(item1); + }, []) + return ( -
-
- Wait for Comfirmation - Delivering - Delivered -
-
+
    +
  • + Wait for Comfirmation +
    • +
  • + Delivering +
    • +
  • + Delivered +
    • +
    +
) } diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx index a889ee68b..62de3c595 100644 --- a/src/components/common/TabCommon/TabItem/TabItem.tsx +++ b/src/components/common/TabCommon/TabItem/TabItem.tsx @@ -4,13 +4,14 @@ import s from './TabItem.module.scss' interface TabItemProps { active: string; - target?: string; - children?: string; + children: string; + onClick: () => void; } -const TabItem = ({ active = "", children } : TabItemProps) => { +const TabItem = ({ active = "", children, onClick } : TabItemProps) => { + return ( - {children} From cc36116ae468cfb172309f8592dfb95805769c1b Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:09:17 +0700 Subject: [PATCH 7/7] :sparkles: feat: Account Navigation --- .../AccountNavigation/AccountNavigation.tsx | 39 ++++++++++++++----- .../components/AccountNavigationItem.tsx | 7 ++-- 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx index fd289edc9..15ecd3a31 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react" +import React, { useState, useRef, RefObject, useEffect } from "react" import s from './AccountNavigation.module.scss' import AccountNavigationItem from './components/AccountNavigationItem' @@ -10,39 +10,58 @@ interface AccountNavigationProps { const AccountNavigation = ({ } : AccountNavigationProps) => { const active = "active", unActive = ""; - const [item1Active, setItem1Active] = useState(active); - const [item2Active, setItem2Active] = useState(unActive); + const [item1Active, setItem1Active] = useState(unActive); + const [item2Active, setItem2Active] = useState(active); 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 top = ref.current.offsetTop; + slider.current.style.top = top.toString()+"px"; + } + function toggleItem1():void { setItem1Active(active) setItem2Active(unActive) setItem3Active(unActive) + slide(item1); } function toggleItem2():void { setItem2Active(active) setItem1Active(unActive) setItem3Active(unActive) + slide(item2); } function toggleItem3():void { setItem3Active(active) setItem1Active(unActive) setItem2Active(unActive) + slide(item3); } + + useEffect(() => { + slide(item2); + }, []) + return (
-
- Customer Information -
-
- Your Orders +
+ Customer Information
-
- Favourites +
+ Your Orders
+
+ Favourites +
+
) } diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx index 47cd537f0..8bb18cb58 100644 --- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { RefObject } from "react"; import classNames from "classnames"; import s from './AccountNavigationItem.module.scss' @@ -6,11 +6,12 @@ interface AccountNavigationItemProps { children?: string; active?: string; target?: string; + onClick: () => void; } -const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => { +const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => { return ( -
{children}