From 185601f002858a643c2beae4a60e516802d60c70 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 30 Aug 2021 16:46:52 +0700 Subject: [PATCH 01/20] :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 8c7c57175d50dfc9a9fd10ef03cae700e3c89e33 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 31 Aug 2021 10:44:11 +0700 Subject: [PATCH 02/20] :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..615a26893 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=true } : 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..370c342d8 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 e1c3acb4625f3c6424f05205350b0162df0baecc Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:15:43 +0700 Subject: [PATCH 03/20] :sparkles: feat: Breadcrumb Common --- .../common/BreadcrumbCommon/BreadcrumbCommon.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index 615a26893..a343ac55e 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -19,19 +19,19 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) crumbs.map((crumb, i) => { if (i === 0) { return ( - + ) } if (i === crumbs.length-1) { return ( - - + + {crumb.name} ) } return ( - - + + ) }) From 361911e328d621bbbb7d0ccb920dfa5783a007b0 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:48:01 +0700 Subject: [PATCH 04/20] :art: style: update style --- .../common/BreadcrumbCommon/BreadcrumbCommon.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss index 6741f386c..d72ea413b 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 +} From e8e220c7ef5143f68df90bce3f4a2e7df6ff18aa Mon Sep 17 00:00:00 2001 From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com> Date: Mon, 6 Sep 2021 12:10:24 +0700 Subject: [PATCH 05/20] :sparkles: feat: Breadcrumb Common --- .../BreadcrumbCommon/BreadcrumbCommon.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx index a343ac55e..98feb9628 100644 --- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -10,13 +10,10 @@ interface BreadcrumbCommonProps { } const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => { - if (showHomePage) { - crumbs.unshift({link: "/", name: "Home"}); - } return (
{ - crumbs.map((crumb, i) => { + showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => { if (i === 0) { return ( @@ -36,6 +33,31 @@ const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) ) }) } + + { + !showHomePage && crumbs.map((crumb, i) => { + if (i === 0) { + return + } + if (i === 1) { + return ( + + ) + } + if (i === crumbs.length-1) { + return ( + + {crumb.name} + + ) + } + return ( + + + + ) + }) + }
) } From 432c7b403c1263806f60e0f275d23cb17d9c9c19 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 14:10:55 +0700 Subject: [PATCH 06/20] :art: styles: drawer comon :%s --- pages/demo.tsx | 12 ++--- .../DrawerCommon/DrawerCommon.module.scss | 44 +++++++++++++++++++ .../common/DrawerCommon/DrawerCommon.tsx | 36 +++++++++++++++ src/components/common/Layout/Layout.tsx | 15 +++++++ src/components/common/index.ts | 1 + src/components/icons/IconClose.tsx | 20 +++++++++ src/components/icons/index.ts | 1 + 7 files changed, 121 insertions(+), 8 deletions(-) create mode 100644 src/components/common/DrawerCommon/DrawerCommon.module.scss create mode 100644 src/components/common/DrawerCommon/DrawerCommon.tsx create mode 100644 src/components/icons/IconClose.tsx diff --git a/pages/demo.tsx b/pages/demo.tsx index f23c10583..38f91037c 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,16 +1,12 @@ -import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; -import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; +import { Layout } from 'src/components/common'; export default function Demo() { return <> - - - - - + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. } diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss new file mode 100644 index 000000000..fc9de8a8a --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -0,0 +1,44 @@ +@import "../../../styles/utilities"; + +.drawerCommon { + @apply fixed flex justify-end transition-all duration-200; + top: 0; + right: 0; + height: 100vh; + width: 90%; + box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); + z-index: 20000; + @screen md { + width: unset; + } + + .inner { + @apply bg-white; + width: fit-content; + height: 100vh; + min-width: 48rem; + width: 100%; + margin-right: 0; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply sm-headline; + } + .iconClose { + @apply cursor-pointer transition-all duration-200; + &:hover { + svg path { + fill: var(--primary); + } + } + } + } + } + .content { + overflow-y: auto; + } + &.hide { + transform: translateX(110%); + } +} diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx new file mode 100644 index 000000000..deb1af3eb --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.tsx @@ -0,0 +1,36 @@ +import React, { useRef } from 'react'; +import s from './DrawerCommon.module.scss'; +import classNames from 'classnames'; +import { IconClose } from 'src/components/icons'; + +interface Props { + visible: boolean + title?: string + children?: React.ReactNode + onClose: () => void +} + +const DrawerCommon = ({ title, visible, children, onClose }: Props) => { + return ( +
+
+
+

+ {title} +

+
+ +
+
+
+ {children} +
+
+
+ ) +} + +export default DrawerCommon; \ No newline at end of file diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index aa5da11e1..e7190f404 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,6 +1,8 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' +import { useModalCommon } from 'src/components/hooks' +import { DrawerCommon, ScrollToTop } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -13,12 +15,25 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() + const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true }) + const toggle = () => { + if (visibleCartDrawer) { + closeCartDrawer() + } else { + openModal() + } + } return (
+
{children}
+
diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 2c1b53b95..edbc5f0a6 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -34,3 +34,4 @@ export { default as ModalInfo} from "./ModalInfo/ModalInfo" export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' +export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' diff --git a/src/components/icons/IconClose.tsx b/src/components/icons/IconClose.tsx new file mode 100644 index 000000000..018ee8cd6 --- /dev/null +++ b/src/components/icons/IconClose.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const IconClose = () => { + return ( + + + + ) +} + +export default IconClose diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 1cdb56079..3430e52af 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -23,3 +23,4 @@ export { default as IconCheck } from './IconCheck' export { default as IconTime } from './IconTime' export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' +export { default as IconClose } from './IconClose' From 5c0dbd9d2f4acd3a876cf9e38a03cf3eddd0edda Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:18:59 +0700 Subject: [PATCH 07/20] :sparkles: feat: Scroll To Top --- .../common/ScrollToTop/ScrollTarget.tsx | 15 --------------- src/components/common/ScrollToTop/ScrollToTop.tsx | 7 +++---- 2 files changed, 3 insertions(+), 19 deletions(-) delete mode 100644 src/components/common/ScrollToTop/ScrollTarget.tsx diff --git a/src/components/common/ScrollToTop/ScrollTarget.tsx b/src/components/common/ScrollToTop/ScrollTarget.tsx deleted file mode 100644 index 50a839c83..000000000 --- a/src/components/common/ScrollToTop/ScrollTarget.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { MutableRefObject } from 'react' - -interface ScrollTargetProps { - refScrollUp: MutableRefObject; -} - -const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => { - - return ( -
- ) - -} - -export default ScrollTarget diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx index 98e16168d..d148c8937 100644 --- a/src/components/common/ScrollToTop/ScrollToTop.tsx +++ b/src/components/common/ScrollToTop/ScrollToTop.tsx @@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss' import ArrowUp from '../../icons/IconArrowUp' interface ScrollToTopProps { - target: MutableRefObject; visibilityHeight?: number; } -const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { +const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => { const [scrollPosition, setSrollPosition] = useState(0); const [showScrollToTop, setShowScrollToTop] = useState("hide"); @@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { }; function handleScrollUp() { - target.current.scrollIntoView({ behavior: "smooth" }); + window.scrollTo(0, 0); } function addEventScroll() { @@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => { } useEffect(() => { - addEventScroll() + addEventScroll(); }); return ( From e4172cf2c760d4153d8925acb56db624703c63b6 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 6 Sep 2021 14:22:34 +0700 Subject: [PATCH 08/20] update --- pages/index.tsx | 12 +++++++++--- src/components/common/index.ts | 1 - 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 88b354335..d3c21e8ed 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,17 +1,23 @@ import React, { MutableRefObject, useRef } from 'react'; -import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollTarget } from 'src/components/common'; +import { Banner, ButtonCommon, ButtonIconBuy, CollectionHeading, HeadingCommon, Inputcommon, InputSearch, Layout, ScrollToTop } from 'src/components/common'; import { IconBuy } from 'src/components/icons'; export default function Home() { - const refScrollUp = useRef() as MutableRefObject; return ( <> - + {/* */} + categories categories + + + + categories + +

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 7d9290c69..d39e1bfbd 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -11,7 +11,6 @@ export { default as Inputcommon} from './InputCommon/InputCommon' export { default as HeadingCommon } from './HeadingCommon/HeadingCommon' export { default as CollectionHeading } from './CollectionHeading/CollectionHeading' export { default as ScrollToTop } from './ScrollToTop/ScrollToTop' -export { default as ScrollTarget } from './ScrollToTop/ScrollTarget' export { default as InputSearch} from './InputSearch/InputSearch' export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy' export { default as Banner} from './Banner/Banner' From fc39eb17589c9bb3449b60a5829594f04342ccfb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:06:06 +0700 Subject: [PATCH 09/20] :art: styles: cart drawer :%s --- next.config.js | 4 ++ .../common/CartDrawer/CartDrawer.module.scss | 12 ++++ .../common/CartDrawer/CartDrawer.tsx | 35 +++++++++++ .../CartCheckoutButton.module.scss | 6 ++ .../CartCheckoutButton/CartCheckoutButton.tsx | 13 ++++ .../CartMessage/CartMessage.module.scss | 15 +++++ .../components/CartMessage/CartMessage.tsx | 18 ++++++ .../CartRecommendation.module.scss | 25 ++++++++ .../CartRecommendation/CartRecommendation.tsx | 43 +++++++++++++ .../ProductCartItem.module.scss | 50 +++++++++++++++ .../ProductCartItem/ProductCartItem.tsx | 56 +++++++++++++++++ .../ProductsInCart/ProductsInCart.module.scss | 5 ++ .../ProductsInCart/ProductsInCart.tsx | 28 +++++++++ .../DrawerCommon/DrawerCommon.module.scss | 7 ++- .../ImgWithLink/ImgWithLink.module.scss | 9 ++- .../common/ImgWithLink/ImgWithLink.tsx | 6 +- src/components/common/Layout/Layout.tsx | 5 +- .../ListProductWithInfo.module.scss | 2 +- src/components/common/index.ts | 1 + src/components/icons/IconDelete.tsx | 11 ++++ src/components/icons/index.ts | 1 + src/styles/_base.scss | 3 +- src/styles/_utilities.scss | 19 ++++++ src/utils/demo-data.ts | 61 +++++++++++++++++++ src/utils/types.utils.ts | 7 ++- tailwind.config.js | 1 + 26 files changed, 431 insertions(+), 12 deletions(-) create mode 100644 src/components/common/CartDrawer/CartDrawer.module.scss create mode 100644 src/components/common/CartDrawer/CartDrawer.tsx create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx create mode 100644 src/components/icons/IconDelete.tsx diff --git a/next.config.js b/next.config.js index 515b2ae7c..d3ad64f4a 100644 --- a/next.config.js +++ b/next.config.js @@ -13,6 +13,10 @@ const isVendure = provider === 'vendure' module.exports = withCommerceConfig({ commerce, + images: { + // todo: replace domains for images + domains: ['user-images.githubusercontent.com'], + }, i18n: { locales: ['en-US', 'es'], defaultLocale: 'en-US', diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss new file mode 100644 index 000000000..126028d3c --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -0,0 +1,12 @@ +@import '../../../styles/utilities'; + + +.cartDrawer { + @apply flex flex-col h-full; + .body { + @apply overflow-y-auto overflow-x-hidden h-full custom-scroll; + } + .bottom { + padding-top: 1.6rem; + } +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx new file mode 100644 index 000000000..0a432bb65 --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { DrawerCommon } from '..'; +import s from './CartDrawer.module.scss'; +import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton'; +import CartMessage from './components/CartMessage/CartMessage'; +import CartRecommendation from './components/CartRecommendation/CartRecommendation'; +import ProductsInCart from './components/ProductsInCart/ProductsInCart'; + +interface Props { + visible: boolean + onClose: () => void +} + +const CartDrawer = ({ visible, onClose }: Props) => { + return ( + +
+
+ + +
+
+ + +
+
+ + ) +} + +export default CartDrawer; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss new file mode 100644 index 000000000..3f90bffbd --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss @@ -0,0 +1,6 @@ +.cartCheckoutButton { + padding: 1.6rem; + button { + width: 100%; + } +} diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx new file mode 100644 index 000000000..0cd7d00a2 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx @@ -0,0 +1,13 @@ +import React, { memo } from 'react'; +import { ButtonCommon } from 'src/components/common'; +import s from './CartCheckoutButton.module.scss'; + +const CartCheckoutButton = memo(() => { + return ( +
+ Check out - Rp 120.500 +
+ ) +}) + +export default CartCheckoutButton; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss new file mode 100644 index 000000000..18d6f96cc --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss @@ -0,0 +1,15 @@ +@import "../../../../../styles/utilities"; + +.cartMessage { + @apply flex bg-info; + padding: 1.2rem 1.6rem; + .text { + font-weight: bold; + margin-right: 0.8rem; + } + .icon { + svg path { + fill: var(--text-placeholder); + } + } +} diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx new file mode 100644 index 000000000..2cc85fb49 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { IconInfo } from 'src/components/icons'; +import s from './CartMessage.module.scss'; + +const CartMessage = memo(() => { + return ( +
+
+ You save - Rp 150 +
+
+ +
+
+ ) +}) + +export default CartMessage; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss new file mode 100644 index 000000000..5b1a5ffa6 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss @@ -0,0 +1,25 @@ +@import '../../../../../styles/utilities'; + +.cartRecommendation { + @apply w-full bg-background-gray; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply font-bold text-active sm-headline; + } + } + .productCardWarpper { + padding-left: 1.6rem; + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx new file mode 100644 index 000000000..bbc40647e --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx @@ -0,0 +1,43 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, ViewAllItem } from 'src/components/common'; +import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; +import s from './CartRecommendation.module.scss'; + +const option: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1, + }, + '(min-width: 768px)': { + slidesPerView: 2.5, + } + }, +} + +const CartRecommendation = () => { + return ( +
+
+
+ Recommendation +
+ +
+
+ + data={PRODUCT_DATA_TEST} + Component={ProductCard} + itemKey="cart-recommendation" + option={option} + /> +
+
+ ) +} + +export default CartRecommendation; diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss new file mode 100644 index 000000000..e8bd0e3ec --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss @@ -0,0 +1,50 @@ +@import "../../../../../styles/utilities"; + +.productCartItem { + @apply grid; + grid-template-columns: 2fr 1fr; + padding-bottom: 1.6rem; + padding-top: 1.6rem; + border-bottom: 1px solid var(--border-line); + .info { + @apply flex; + .imgWrap { + width: 11rem; + height: 7.5rem; + margin-right: 1.6rem; + img { + object-fit: contain; + } + } + .detail { + min-height: 9rem; + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active font-bold sm-headline; + } + } + } + } + + .actions { + @apply flex flex-col justify-between items-end; + margin-left: 1.6rem; + .iconDelete { + @apply cursor-pointer; + &:hover { + svg path { + fill: var(--negative); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx new file mode 100644 index 000000000..7ec3ecbdb --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Link from 'next/link' +import { QuanittyInput } from 'src/components/common'; +import { IconDelete } from 'src/components/icons'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { ProductProps } from 'src/utils/types.utils'; +import ImgWithLink from '../../../ImgWithLink/ImgWithLink'; +import LabelCommon from '../../../LabelCommon/LabelCommon'; +import s from './ProductCartItem.module.scss'; + +export interface ProductCartItempProps extends ProductProps { + quantity: number, +} + +const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => { + return ( +
+
+ + +
+ +
+ + +
+ + +
+ {name} {weight ? `(${weight})` : ''} +
+ + +
+ { + oldPrice && +
+ {oldPrice} + {discount} +
+ } +
{price}
+
+
+
+
+
+ +
+ +
+
+ ) +} + +export default ProductCartItem; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss new file mode 100644 index 000000000..96df763b8 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss @@ -0,0 +1,5 @@ + +.productsInCart { + padding: 1.6rem 1.6rem 0 1.6rem; + margin-bottom: -1px; +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx new file mode 100644 index 000000000..5eddc1c25 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem'; +import s from './ProductsInCart.module.scss'; + +interface Props { + data: ProductCartItempProps[] +} + +const ProductsInCart = ({ data }: Props) => { + return ( +
+ { + data.map(item => ) + } +
+ ) +} + +export default ProductsInCart; \ No newline at end of file diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss index fc9de8a8a..18d992741 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.module.scss +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -2,6 +2,7 @@ .drawerCommon { @apply fixed flex justify-end transition-all duration-200; + overflow: hidden; top: 0; right: 0; height: 100vh; @@ -13,12 +14,15 @@ } .inner { - @apply bg-white; + @apply flex flex-col bg-white; width: fit-content; height: 100vh; min-width: 48rem; width: 100%; margin-right: 0; + @screen md { + max-width: 50rem; + } .top { @apply flex justify-between items-center; padding: 1.6rem; @@ -37,6 +41,7 @@ } .content { overflow-y: auto; + height: 100%; } &.hide { transform: translateX(110%); diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss index b1587bfa6..413f96cdb 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.module.scss +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -1,4 +1,9 @@ .imgWithLink { - @apply w-full h-full; - object-fit: cover; + position: relative; + min-width: 5rem; + width: 100%; + height: 100%; + img { + object-fit: cover; + } } diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 43ac1caa6..092322085 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.tsx +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -1,5 +1,6 @@ import React from 'react' import s from './ImgWithLink.module.scss' +import Image from 'next/image' export interface ImgWithLinkProps { src: string, @@ -8,8 +9,9 @@ export interface ImgWithLinkProps { const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { return ( - {alt} - +
+ {alt} +
) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index e7190f404..ea09855ff 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { DrawerCommon, ScrollToTop } from '..' +import { CartDrawer } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -30,8 +30,7 @@ const Layout: FC = ({ children }) => {
{children}
-