✨ feat: Account Page

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

@@ -1,22 +1,9 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    @apply flex spacing-horizontal;
+    @apply spacing-horizontal;
     background-color: #F5F4F2;
     margin-top: -3.2rem;
+    padding-top: 3.2rem;
     padding-bottom: 3.2rem;
-
-    .pageLeft {
-        padding-top: 5.6rem;
-        margin-right: 12.4rem;
-
-        .accNavi{
-            margin-top: 3.8rem;
-        }
-    }
-
-    .pageRight {
-        padding-top: 5.6rem;
-        width: 100%;
-    }
 }

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import React, { useState } from "react"
 import s from './AccountPage.module.scss'
 
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
@@ -6,18 +6,9 @@ import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
 import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
+import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
 
 const waiting = [
-    {
-        id: "NO 123456",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
-        totalPrice : 1000
-    },
-    {
-        id: "NO 123456",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
-        totalPrice : 1000
-    },
     {
         id: "NO 123456",
         products: ["Tomato", "Fish", "Pork", "Onion"],
@@ -57,7 +48,7 @@ interface AccountPageProps {
 
 const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
     
-    const [activeTab, setActiveTab] = useState(defaultActiveContent==="info"? 0 : defaultActiveContent==="orders"? 1 : 2)
+    const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
 
     function showModal() {
@@ -68,33 +59,22 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
         setModalVisible(false);
     }
 
-    const changeTab = (tabIndex: number) => {
-        setActiveTab(tabIndex);
-    }
-
-    const accNavItems = [
-        {ref: useRef<HTMLDivElement>(null), active: activeTab===0, itemName: "Customer Information", onClick: changeTab},
-        {ref: useRef<HTMLDivElement>(null), active: activeTab===1, itemName: "Your Orders", onClick: changeTab},
-        {ref: useRef<HTMLDivElement>(null), active: activeTab===2, itemName: "Favorites", onClick: changeTab}
-    ]
-
     return (
         <>
             <section className={s.accountPage}>
-                <div className={s.pageLeft}>
+                <HeadingCommon>Account</HeadingCommon>
-                    <HeadingCommon>Account</HeadingCommon>
-                    <div className={s.accNavi}>
-                        <AccountNavigation items={accNavItems} defaultActiveIndex={activeTab} />
-                    </div>
-                </div>
-                
-                <div className={s.pageRight}>
-                    <AccountInfomation active={activeTab === 0} account={account} onClick={showModal}  />
-                    <OrderInfomation active={activeTab === 1} waiting={waiting} delivering={delivering} delivered={delivered} />
 
-                    {/* Thieu cai favorite */}
+                <AccountNavigation defaultActiveIndex={activeTab}>
-                    {/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}
+                    <TabPane tabName="Customer Information"> 
-                </div>
+                        <AccountInfomation account={account} onClick={showModal}  />
+                    </TabPane>
+                    <TabPane tabName="Your Orders"> 
+                        <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
+                    </TabPane>
+                    <TabPane tabName="Favourite"> 
+                        {/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */}
+                    </TabPane>
+                </AccountNavigation>
             </section>
             <EditInfoModal accountInfo={account} closeModal={closeModal} visible={modalVisible} />
         </>

src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx

@@ -4,13 +4,16 @@ import s from './AccountInfomation.module.scss'
 import Image from "next/image"
 import avatar from '../../assets/avatar.png';
 
+interface AccountProps {
+    name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
+}
+
 interface AccountInfomationProps {
-    account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
+    account: AccountProps;
-    active: boolean;
     onClick: () => void;
 }
 
-const AccountInfomation = ({ account, active=false, onClick } : AccountInfomationProps) => {
+const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
 
     // need to handle call back when edit account information 
 
@@ -19,7 +22,7 @@ const AccountInfomation = ({ account, active=false, onClick } : AccountInfomatio
     return (
         <section className={s.accountInfomation}>
             {
-                active && <div>
+                <div>
                     <div className={s.avatar}>
                         <Image src={avatar} alt="avatar" />
                     </div>
@@ -46,8 +49,6 @@ const AccountInfomation = ({ account, active=false, onClick } : AccountInfomatio
                     <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
                 </div>
             }
-
-            
         </section>
     )
 }

src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss

@@ -58,7 +58,6 @@
             @apply bg-white text-center font-bold custom-border-radius-lg;
             color: #141414;
             border: 1px solid #141414;
-            // border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
             margin-right: 1.6rem;
             width: 100%;
@@ -72,7 +71,6 @@
             @apply text-center font-bold custom-border-radius-lg;
             background-color: var(--primary);
             color: white;
-            // border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
             width: 100%;
             &:hover {

src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx

@@ -10,15 +10,14 @@ interface OrderInformationProps {
     waiting: {id: string, products: string[], totalPrice: number}[],
     delivering: {id: string, products: string[], totalPrice: number}[],
     delivered: {id: string, products: string[], totalPrice: number}[],
-    active: boolean
 }
 
-const OrderInformation = ({ waiting, delivering, delivered, active } : OrderInformationProps) => {
+const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
 
     return (
         <section className={s.orderInformation}>
             {
-                active && <div>
+                <div>
                     <div className={s.title}>Order Information</div>
 
                     <div className={s.tabs}>

src/components/modules/account/AccountPage/components/TabPane/TabPane.module.scss

@@ -1,23 +0,0 @@
-@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/modules/account/AccountPage/components/TabPane/TabPane.tsx

@@ -1,20 +0,0 @@
-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