From 1e1937290d923f55bb077df82dbbf09ae7d7c969 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 6 Sep 2021 11:07:45 +0700 Subject: [PATCH] feat: BlogsPage --- pages/index.tsx | 6 +-- .../BreadcrumbCommon.module.scss | 1 - .../BreadcrumbCommon/BreadcrumbCommon.tsx | 2 +- .../BreadcrumbSeparator.tsx | 2 +- .../common/TabCommon/TabCommon.module.scss | 15 ++++++ src/components/common/TabCommon/TabCommon.tsx | 47 +++++++++++++++++ .../TabCommon/TabItem/TabItem.module.scss | 16 ++++++ .../common/TabCommon/TabItem/TabItem.tsx | 21 ++++++++ .../AccountNavigation.module.scss | 5 ++ .../AccountNavigation/AccountNavigation.tsx | 50 +++++++++++++++++++ .../AccountNavigationItem.module.scss | 19 +++++++ .../components/AccountNavigationItem.tsx | 21 ++++++++ .../BlogBreadcrumb/BlogBreadCrumb.module.scss | 4 ++ .../blogs/BlogBreadcrumb/BlogBreadcrumb.tsx | 16 ++++++ .../modules/blogs/BlogsPage/BlogsPage.tsx | 13 +++++ src/components/modules/blogs/index.tsx | 4 +- 16 files changed, 234 insertions(+), 8 deletions(-) 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 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 create mode 100644 src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss create mode 100644 src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx create mode 100644 src/components/modules/blogs/BlogsPage/BlogsPage.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 79db66f8f..f2ee25b3c 100644 --- a/pages/index.tsx +++ b/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 ( <> - - - + ) } diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss index 6741f386c..b1f45a761 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss @@ -1,6 +1,5 @@ @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 index 615a26893..2dca6b714 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/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"}); } diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx index 370c342d8..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?: React.ReactNode + children?: React.ReactNode; } const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss new file mode 100644 index 000000000..9e5fbc1df --- /dev/null +++ b/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%; + } +} + diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx new file mode 100644 index 000000000..d07cf06e8 --- /dev/null +++ b/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 ( +
+
+ 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..efb10f1f4 --- /dev/null +++ b/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; + } +} diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx new file mode 100644 index 000000000..a889ee68b --- /dev/null +++ b/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 ( + + {children} + + ) +} + +export default TabItem; \ No newline at end of file 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 diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss new file mode 100644 index 000000000..351568743 --- /dev/null +++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss @@ -0,0 +1,4 @@ +.breadCrumbWrapper{ + @apply py-12; + padding-left: 3.2rem; +} \ No newline at end of file diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx new file mode 100644 index 000000000..bb2ea19ef --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default BlogBreadCrumb \ No newline at end of file diff --git a/src/components/modules/blogs/BlogsPage/BlogsPage.tsx b/src/components/modules/blogs/BlogsPage/BlogsPage.tsx new file mode 100644 index 000000000..6685eefca --- /dev/null +++ b/src/components/modules/blogs/BlogsPage/BlogsPage.tsx @@ -0,0 +1,13 @@ +import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs'; + +const BlogsPage = () => { + return( + <> + + + + + + ) +} +export default BlogsPage \ No newline at end of file diff --git a/src/components/modules/blogs/index.tsx b/src/components/modules/blogs/index.tsx index 36e0e5d15..ea9b5bee0 100644 --- a/src/components/modules/blogs/index.tsx +++ b/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' \ No newline at end of file +export { default as BlogHeading } from './BlogHeading/BlogHeading' +export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb' +export { default as BlogsPage } from './BlogsPage/BlogsPage' \ No newline at end of file