feat: BlogsPage

pages/index.tsx

@@ -4,14 +4,12 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR
 import {SelectCommon} from 'src/components/common'
 import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import card from "../public/assets/images/card.png"
-import { BlogsList, FeaturedCardBlog, BlogHeading } from 'src/components/modules/blogs';
+import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb, BlogsPage } from 'src/components/modules/blogs';
 
 export default function Home() {
   return (
     <>
-      <BlogHeading />
-      <FeaturedCardBlog />
-      <BlogsList />
+      <BlogsPage />
     </>
   )
 }

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

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

src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx

@@ -9,7 +9,7 @@ interface BreadcrumbCommonProps {
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
+const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
     if (showHomePage) {
         crumbs.unshift({link: "/", name: "Home"});
     }

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface BreadcrumbSeparatorProps {
-    children?: React.ReactNode
+    children?: React.ReactNode;
 }
 
 const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {

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,47 @@
+import React, { useState } from "react"
+import s from './TabCommon.module.scss'
+
+import TabItem from './TabItem/TabItem'
+
+interface TabCommonProps {
+
+}
+
+const TabCommon = ({ } : TabCommonProps) => {
+    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 (
+        <section className={s.tabCommonOutSide}>
+            <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>
+        </section>
+    )
+}
+
+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,21 @@
+import classNames from "classnames";
+import React from "react"
+import s from './TabItem.module.scss'
+
+interface TabItemProps {
+    active: string;
+    target?: string;
+    children?: string;
+}
+
+const TabItem = ({ active = "", children } : TabItemProps) => {
+    return (
+        <span 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,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 (
+        <section className={s.accountNavigation}>
+            <div onClick={toggleItem1}>
+                <AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
+                </div>
+            <div onClick={toggleItem2}>
+                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
+            </div>
+            <div onClick={toggleItem3}>
+                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+            </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,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 (
+        <div className={classNames(s.accountNavigationItem, {
+            [s[active]]:active
+        })}>
+            {children}
+        </div>
+    )
+}
+
+export default AccountNavigationItem

src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss

@@ -0,0 +1,4 @@
+.breadCrumbWrapper{
+    @apply py-12;
+    padding-left: 3.2rem;
+}

src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx

@@ -0,0 +1,16 @@
+import { BreadcrumbCommon } from "src/components/common"
+import s from './BlogBreadCrumb.module.scss'
+
+const BLOG_DATA = [
+    {link: "/blogs", name: "Blog"},
+];
+
+const BlogBreadCrumb = () => {
+    return (
+        <section className={s.breadCrumbWrapper}>
+            <BreadcrumbCommon crumbs={BLOG_DATA} showHomePage={true}/>
+        </section>
+    )
+}
+
+export default BlogBreadCrumb

src/components/modules/blogs/BlogsPage/BlogsPage.tsx

@@ -0,0 +1,13 @@
+import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
+
+const BlogsPage = () => {
+    return(
+        <>
+            <BlogBreadCrumb />
+            <BlogHeading />
+            <FeaturedCardBlog />
+            <BlogsList />
+        </>
+    )
+}
+export default BlogsPage

src/components/modules/blogs/index.tsx

@@ -1,3 +1,5 @@
 export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
 export { default as BlogsList } from './BlogsList/BlogsList'
-export { default as BlogHeading } from './BlogHeading/BlogHeading'
+export { default as BlogHeading } from './BlogHeading/BlogHeading'
+export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb'
+export { default as BlogsPage } from './BlogsPage/BlogsPage'