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

src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss

@@ -0,0 +1,6 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+    @apply spacing-horizontal-left;
+    color: var(--text-base);
+}

src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import s from './BreadcrumbCommon.module.scss'
+
+import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
+import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
+
+interface BreadcrumbCommonProps {
+    crumbs: { link:string, name:string }[];
+    showHomePage?: boolean;
+}
+
+const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
+    if (showHomePage) {
+        crumbs.unshift({link: "/", name: "Home"});
+    }
+    return (
+        <section className={s.breadcrumbCommon}>
+            {
+                crumbs.map((crumb, i) => {
+                    if (i === 0) {
+                        return (
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        )
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={i}>
+                                <BreadcrumbItem key={i} text={crumb.name} href="#" />
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={i}>
+                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
+                        </BreadcrumbSeparator>
+                    )
+                })
+            }
+        </section>
+    )
+}
+
+export default BreadcrumbCommon

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 (
+        <Link href={href}>
+            <a>{text}</a>
+        </Link>
+    )
+}
+
+export default BreadcrumbItem

src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface BreadcrumbSeparatorProps {
+    children?: React.ReactNode;
+}
+
+const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
+    return (
+        <span>
+            &nbsp;/&nbsp;{children}
+        </span>
+    )
+}
+
+export default BreadcrumbSeparator

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

@@ -0,0 +1,15 @@
+@import '../../../styles/utilities';
+
+.tabCommonOutSide {
+    @apply spacing-horizontal;
+    
+    .tabCommon {
+        @apply flex;
+        position: relative;
+        border-bottom: 2px solid #FBFBFB;
+        padding-top: 1.6rem;
+        padding-bottom: 1.6rem;
+        width: 100%;
+    }
+}
+

src/components/common/TabCommon/TabCommon.tsx

@@ -0,0 +1,75 @@
+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 = ({ changeTab } : TabCommonProps) => {
+    const active = "active", unActive = "";
+    const [item1Active, setItem1Active] = useState(active);
+    const [item2Active, setItem2Active] = useState(unActive);
+    const [item3Active, setItem3Active] = useState(unActive);
+
+    const item1 = useRef<HTMLLIElement>(null);
+    const item2 = useRef<HTMLLIElement>(null);
+    const item3 = useRef<HTMLLIElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLLIElement>) {
+        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 (
+        <ul className={s.tabCommon}>
+            <li ref={item1}>
+                <TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
+            </li>
+            <li ref={item2}>
+                <TabItem onClick={toggleItem2} active={item2Active}>Delivering</TabItem>
+            </li>
+            <li ref={item3}>
+                <TabItem onClick={toggleItem3} active={item3Active}>Delivered</TabItem>
+            </li>
+            <div ref={slider} className={s.slider}></div>
+        </ul>
+    )
+}
+
+export default TabCommon;

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

@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+
+.tabItem {
+    margin-right: 4.8rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+
+    &.active {
+        @apply font-bold;
+        border-bottom: 2px solid var(--primary);
+    }
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+}

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

@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react"
+import s from './TabItem.module.scss'
+
+interface TabItemProps {
+    active: string;
+    children: string;
+    onClick: () => void;
+}
+
+const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+
+    return (
+        <span onClick={onClick} className={classNames(s.tabItem, {
+            [s[active]]: active
+        })}>
+            {children}
+        </span>
+    )
+}
+
+export default TabItem;

src/components/modules/account/AccountNavigation/AccountNavigation.module.scss

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

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useRef, RefObject, useEffect } 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(unActive);
+    const [item2Active, setItem2Active] = useState(active);
+    const [item3Active, setItem3Active] = useState(unActive);
+
+    const item1 = useRef<HTMLDivElement>(null);
+    const item2 = useRef<HTMLDivElement>(null);
+    const item3 = useRef<HTMLDivElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLDivElement>) {        
+        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 (
+        <section className={s.accountNavigation}>
+            <div ref={item1}>
+                <AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
+            </div>
+            <div ref={item2}>
+                <AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
+            </div>
+            <div ref={item3}>
+                <AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
+            </div>
+            <div ref={slider} className={s.slider}></div>
+        </section>
+    )
+}
+
+export default AccountNavigation

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

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx

@@ -0,0 +1,22 @@
+import React, { RefObject } from "react";
+import classNames from "classnames";
+import s from './AccountNavigationItem.module.scss'
+
+interface AccountNavigationItemProps {
+    children?: string;
+    active?: string;
+    target?: string;
+    onClick: () => void;
+}
+
+const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
+    return (
+        <div onClick={onClick} className={classNames(s.accountNavigationItem, {
+            [s[active]]:active
+        })}>
+            {children}
+        </div>
+    )
+}
+
+export default AccountNavigationItem