diff --git a/pages/_app.tsx b/pages/_app.tsx index bd7f0f066..ff8845072 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,8 @@ import { ThemeProvider } from 'next-themes'; import type { AppProps } from 'next/app'; import React, { FC, useEffect } from 'react'; -import { Head } from 'src/components/common'; -import 'keen-slider/keen-slider.min.css'; +import { CustomShapeSvg, Head } from 'src/components/common'; +import 'keen-slider/keen-slider.min.css'; import '../src/styles/main.scss'; @@ -19,6 +19,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { <> + diff --git a/pages/account.tsx b/pages/account.tsx index 84f0d8d74..7da102c52 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -1,13 +1,10 @@ import React from 'react'; import { Layout } from 'src/components/common'; -import { AccountPage, AccountSignIn } from 'src/components/modules/account'; +import { AccountPage } from 'src/components/modules/account'; const Account = () => { return ( - // - <> - - + ); }; diff --git a/pages/demo.tsx b/pages/demo.tsx index 38f91037c..47fb1eea1 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,13 +1,13 @@ import { Layout } from 'src/components/common'; - - - +import { NotificationEmptyPage, NotificationHeading, NotificationBreadcrumb } from 'src/components/modules/Notification'; 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. + return ( + <> + + + + ) } Demo.Layout = Layout diff --git a/pages/notifications.tsx b/pages/notifications.tsx new file mode 100644 index 000000000..f124519f9 --- /dev/null +++ b/pages/notifications.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Layout } from 'src/components/common'; +import { NotificationBreadcrumb, NotificationHeading, NotificationPage } from 'src/components/modules/Notification'; + +const Notification = () => { + return ( + <> + + + + + ) +} + +Notification.Layout = Layout + +export default Notification; \ No newline at end of file diff --git a/public/fonts/Norquay-bold.otf b/public/fonts/Norquay-bold.otf new file mode 100644 index 000000000..37212fd9f Binary files /dev/null and b/public/fonts/Norquay-bold.otf differ diff --git a/public/fonts/Norquay-bold.woff b/public/fonts/Norquay-bold.woff new file mode 100644 index 000000000..28564d5d4 Binary files /dev/null and b/public/fonts/Norquay-bold.woff differ diff --git a/public/fonts/style.css b/public/fonts/style.css new file mode 100644 index 000000000..53f6af31e --- /dev/null +++ b/public/fonts/style.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Norquay-bold"; + src: url("./Norquay-bold.otf") format("opentype"), url("./Norquay-bold.woff") format("woff"); +} diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index 410fded77..3b0c0fe85 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/src/components/common/Banner/Banner.tsx @@ -1,3 +1,4 @@ +import { TOptionsEvents } from 'keen-slider' import React, { memo } from 'react' import CarouselCommon from '../CarouselCommon/CarouselCommon' import BannerItem, { BannerItemProps } from './BannerItem/BannerItem' @@ -6,7 +7,7 @@ interface Props { data: BannerItemProps[], } -const option = { +const option: TOptionsEvents = { slidesPerView: 1, mode: 'free', } diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss index 9331a7aff..5a37e252a 100644 --- a/src/components/common/Banner/BannerItem/BannerItem.module.scss +++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss @@ -5,6 +5,9 @@ padding: 0; &.large { margin-bottom: 2.8rem; + background-image: url("./pattern.svg"); + background-repeat: repeat; + background-size: auto; .inner { background-size: cover; background-position: center bottom; diff --git a/src/components/common/Banner/BannerItem/pattern.svg b/src/components/common/Banner/BannerItem/pattern.svg new file mode 100644 index 000000000..fab63f17f --- /dev/null +++ b/src/components/common/Banner/BannerItem/pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss index ef2671947..4b3c7d537 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -9,6 +9,7 @@ width: 64px; height: 64px; border-radius: .8rem; + backdrop-filter: saturate(180%) blur(10px); &:focus { outline: none; } diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss index d5bba6c57..8d97f971e 100644 --- a/src/components/common/CartDrawer/CartDrawer.module.scss +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -4,6 +4,6 @@ .cartDrawer { @apply flex flex-col h-full; .body { - @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll; + @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll; } } \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx index 31da985ef..9410cfd9c 100644 --- a/src/components/common/CartDrawer/CartDrawer.tsx +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -25,7 +25,7 @@ const CartDrawer = ({ visible, onClose }: Props) => {
- +
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx index 5cc8f5f6f..97cb3e0eb 100644 --- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx @@ -4,11 +4,16 @@ import s from './CartCheckoutButton.module.scss'; import Link from 'next/link' import { ROUTE } from 'src/utils/constanst.utils'; -const CartCheckoutButton = memo(() => { +interface Props { + onClose: () => void +} + + +const CartCheckoutButton = memo(({ onClose }: Props) => { return ( - Check out - Rp 120.500 + Check out - Rp 120.500 ) diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss index d118d45e8..0fc8b5b35 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.module.scss +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -1,21 +1,40 @@ @import "../../../styles/utilities"; .drawerCommon { - @apply fixed flex justify-end transition-all duration-200; + @apply fixed flex justify-end transition-all duration-500; overflow: hidden; top: 0; right: 0; height: 100vh; - width: 90%; - box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); + width: 100%; z-index: 20000; + transform: none; + &.hide { + .innerWrap { + background: none; + } + transform: translateX(110%); + } + &.show { + .innerWrap { + background: rgba(0, 0, 0, 0.2); + animation: animateBackground 0.8s; + } + } + + .innerWrap { + @apply w-full; + } .inner { @apply flex flex-col bg-white; width: fit-content; height: 100vh; width: 100%; - margin-right: 0; + margin-left: auto; + box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); + // transform: none; + @screen md { max-width: 52rem; } @@ -39,14 +58,21 @@ overflow-y: auto; height: 100%; } - &.hide { - transform: translateX(110%); - } @screen md { - width: unset; .inner { min-width: 48rem; } } } + +@keyframes animateBackground { + 0%, + 50% { + background: none; + } + + 100% { + background: rgba(0, 0, 0, 0.2); + } +} diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx index deb1af3eb..9e486dd23 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.tsx +++ b/src/components/common/DrawerCommon/DrawerCommon.tsx @@ -11,22 +11,33 @@ interface Props { } const DrawerCommon = ({ title, visible, children, onClose }: Props) => { +const refInner = useRef(null) + +const handleClickOut = (e: any) => { + if (e.target.contains(refInner.current)) { + onClose() + } +} + return (
-
-
-

- {title} -

-
- +
+
+
+

+ {title} +

+
+ +
+
+
+ {children}
-
-
- {children}
diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 1a73bbae5..8f1124fb8 100644 --- a/src/components/common/Header/Header.module.scss +++ b/src/components/common/Header/Header.module.scss @@ -41,13 +41,13 @@ transition: all 0.2s; &.show { display: block; - animation: showHeaderSticky 0.2s; + animation: showHeaderSticky 0.4s; } } @keyframes showHeaderSticky { 0% { - transform: translateY(-7rem); + transform: scale(.95); } 100% { transform: none; diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index b86b36fb7..d1d88adda 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames' import React, { memo, useEffect, useMemo, useRef, useState } from 'react' import { useModalCommon } from 'src/components/hooks' -import { isMobile } from 'src/utils/funtion.utils' import { CartDrawer } from '..' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' @@ -12,10 +11,10 @@ import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuM import s from './Header.module.scss' interface props { toggleFilter: () => void, - visibleFilter:boolean + visibleFilter: boolean } -const Header = memo(({ toggleFilter,visibleFilter }: props) => { +const Header = memo(({ toggleFilter, visibleFilter }: props) => { const headeFullRef = useRef(null) const [isFullHeader, setIsFullHeader] = useState(true) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) @@ -30,27 +29,23 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => { } } - const headerHeight = useMemo(() => { - return headeFullRef.current?.offsetHeight - }, [headeFullRef.current]) - useEffect(() => { const handleScroll = () => { - if (!isMobile()) { - if (!headerHeight || window.scrollY > headerHeight) { - setIsFullHeader(false) - } else { - setIsFullHeader(true) - } + if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) { + setIsFullHeader(false) } else { setIsFullHeader(true) } + // if (!isMobile()) { + // } else { + // setIsFullHeader(true) + // } } window.addEventListener('scroll', handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } - }, [headerHeight]) + }, [headeFullRef.current]) return ( <> @@ -59,16 +54,18 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => { [s.show]: !isFullHeader })}>
- +
void, openModalInfo: () => void, toggleFilter: () => void, @@ -20,7 +23,7 @@ interface Props { const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS] -const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleFilter, toggleCart}: Props) => { +const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { const router = useRouter() @@ -35,7 +38,11 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF }, { link: '/account-not-login', - name: 'Account Not Login', + name: 'Account Not Login (Demo)', + }, + { + link: '/demo', + name: 'Notifications Empty (Demo)', }, { link: ROUTE.NOTIFICATION, @@ -52,7 +59,11 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF ], [openModalAuthen]) return ( -
+
@@ -60,8 +71,8 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF { FILTER_PAGE.includes(router.pathname) && ( ) } @@ -71,8 +82,13 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
-
- +
+
+ +
+
+ Search +
    diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss index 30e4a077d..679b0b48f 100644 --- a/src/components/common/Layout/Layout.module.scss +++ b/src/components/common/Layout/Layout.module.scss @@ -4,6 +4,9 @@ min-height: 100vh; > main { flex: 1; + width: 100%; + max-width: min( 100%, 1536px); + margin: auto; } } .filter{ diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 76ea316b4..233c53bbc 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils' -import { CustomShapeSvg, ScrollToTop } from '..' +import { ScrollToTop } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList' @@ -28,15 +28,13 @@ const Layout: FC = ({ children }) => { } return ( -
    -
    -
    {children}
    - - -
    - -
    -
    +
    +
    +
    {children}
    +
    + +
    +
    ) diff --git a/src/components/common/ScrollToTop/ScrollToTop.module.scss b/src/components/common/ScrollToTop/ScrollToTop.module.scss index 940bc0ac2..bfaa5cb99 100644 --- a/src/components/common/ScrollToTop/ScrollToTop.module.scss +++ b/src/components/common/ScrollToTop/ScrollToTop.module.scss @@ -8,7 +8,7 @@ &.show { @apply block rounded-lg fixed cursor-pointer; right: 6.4rem; - bottom: 21.6rem; + bottom: 10.6rem; width: 6.4rem; height: 6.4rem; background-color: var(--border-line); diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss index d8b5d0f9a..ff90e8979 100644 --- a/src/components/common/TabCommon/TabCommon.module.scss +++ b/src/components/common/TabCommon/TabCommon.module.scss @@ -7,7 +7,7 @@ .tabList { @apply flex; position: relative; - border-bottom: 2px solid #FBFBFB; + border-bottom: 2px solid #EBEBEB; padding: 0.8rem 0; &.center{ margin: auto; diff --git a/src/components/icons/IconBell.tsx b/src/components/icons/IconBell.tsx new file mode 100644 index 000000000..278edc640 --- /dev/null +++ b/src/components/icons/IconBell.tsx @@ -0,0 +1,19 @@ +const IconBell = ({ ...props }) => { + return ( + + + + ) + } + + export default IconBell + \ No newline at end of file diff --git a/src/components/icons/IconBill.tsx b/src/components/icons/IconBill.tsx new file mode 100644 index 000000000..4892a0b07 --- /dev/null +++ b/src/components/icons/IconBill.tsx @@ -0,0 +1,25 @@ +const IconBill = ({ ...props }) => { + return ( + + + + + ) + } + + export default IconBill + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 0a6aab07a..70575e11d 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -33,4 +33,6 @@ export { default as IconMinus } from './IconMinus' export { default as IconCirclePlus } from './IconCirclePlus' export { default as IconDoneCheckout } from './IconDoneCheckout' export { default as IconFilter } from './IconFilter' -export { default as IconNoti } from './IconNoti' \ No newline at end of file +export { default as IconBell } from './IconBell' +export { default as IconBill } from './IconBill' +export { default as IconNoti } from './IconNoti' diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss new file mode 100644 index 000000000..d347ad872 --- /dev/null +++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss @@ -0,0 +1,7 @@ +@import "../../../../styles/utilities"; +.breadCrumbWrapper { + @apply py-12 spacing-horizontal; + @screen lg { + padding-left: 3.2rem; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx new file mode 100644 index 000000000..5f713e2db --- /dev/null +++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx @@ -0,0 +1,16 @@ +import { BreadcrumbCommon } from "src/components/common" +import s from './NotificationBreadcrumb.module.scss' + +const NOTIFICATION_DATA = [ + {link: "/notifications", name: "Notifications"}, +]; + +const NotificationBreadcrumb = () => { + return ( +
    + +
    + ) +} + +export default NotificationBreadcrumb \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss new file mode 100644 index 000000000..13efe5e14 --- /dev/null +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss @@ -0,0 +1,17 @@ +@import "../../../../styles/utilities"; + +.emptyPage { + @apply flex justify-center items-center flex-col; + margin-bottom: 5.4rem; + @screen lg { + margin-bottom: 12.8rem; + } + .emptyIcon { + padding-bottom: 2.6rem; + } + .emptyContent { + @apply sub-headline; + align-content: center; + color: var(--disabled); + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx new file mode 100644 index 000000000..b698b0f50 --- /dev/null +++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { IconBell } from 'src/components/icons' +import s from '../NotificationEmptyPage/NotificationEmptyPage.module.scss' + + +const NotificationEmptyPage = () => { + return ( +
    +
    + +
    +
    +

    Your Notification is empty

    +
    +
    + ) +} +export default NotificationEmptyPage \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss new file mode 100644 index 000000000..2833c5f10 --- /dev/null +++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss @@ -0,0 +1,9 @@ +@import "../../../../styles/utilities"; + +.headingWrapper { + @apply flex spacing-horizontal-left pb-16; + .heading{ + max-width: 121.6rem; + flex-grow: 1; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx new file mode 100644 index 000000000..573bac2a9 --- /dev/null +++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx @@ -0,0 +1,18 @@ +import { HeadingCommon } from "src/components/common" +import s from './NotificationHeading.module.scss' + +interface NotificationHeadingProps { + children?: React.ReactNode, + heading?: string, +} + +const NotificationHeading = ({heading = "NOTIFICATIONS"}: NotificationHeadingProps) => { + return ( +
    +
    + {heading} +
    +
    + ) +} +export default NotificationHeading \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss new file mode 100644 index 000000000..ac064e19f --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss @@ -0,0 +1,35 @@ +@import '../../../../styles/utilities'; + +.notificationItem { + @apply flex flex-row spacing-horizontal; + padding-top: 1.2rem; + &:hover{ + cursor: pointer; + } + .contentWrapper { + padding-left: 1.6rem; + padding-bottom: 1.4rem; + max-width: 26.3rem; + .title { + font-weight: bold; + color: var(--text-active); + } + .date { + @apply caption; + color: #828282; + } + } + &.isChecked { + .icon { + rect { + fill: var(--gray) + } + path { + fill: var(--disabled) + } + } + .title, .content { + color: var(--text-label); + } + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx new file mode 100644 index 000000000..402575daf --- /dev/null +++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx @@ -0,0 +1,51 @@ +import React, {useState} from 'react' +import s from '../NotificationItem/NotificationItem.module.scss' +import ClassNames from 'classnames' +import { IconBill } from 'src/components/icons' +import Link from 'next/link' +import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils' + +export interface NotificationItemProps { + ID?: string, + title?: string, + content?: string, + date?: string, + checked?: boolean, +} + +const NotificationItem = ({ ID, title, content, date, checked}: NotificationItemProps) => { + const [isChecked, setChecked] = useState(checked) + const Check = () => { + setChecked(true) + } + return ( +
    +
    + +
    + + +
    +
    + {title} +
    +
    + {content} +
    +
    + {date} +
    +
    +     + + +
    + ) +} + +export default NotificationItem \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss new file mode 100644 index 000000000..1a214dccc --- /dev/null +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss @@ -0,0 +1,6 @@ +.notificationPage { + padding-bottom: 5.4rem; + @screen md { + padding-bottom: 12.8rem; + } +} \ No newline at end of file diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx new file mode 100644 index 000000000..954b7727c --- /dev/null +++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage' +import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem' +import s from './NotificationPage.module.scss' + +interface NotificationPageProps { + isEmpty?: boolean, + data?: NotificationItemProps[], +} +const NOTIFICATION_DATA = [ + { + ID: "ID33455", + title: "Your order ID33455", + content: "The order has been deliveried successfully!", + date: "2 days ago", + checked: false, + }, + { + ID: "ID33456", + title: "Your order ID33456", + content: "The order has been deliveried successfully!", + date: "2 days ago", + checked: false, + }, + { + ID: "ID33457", + title: "Your order ID33457", + content: "The order has been deliveried successfully!", + date: "2 days ago", + checked: true, + } +] + + +const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => { + return ( +
    + { + isEmpty ? + + : + <> + { + data.map(item => { + return ( + + ) + }) + } + + } +
    + ) +} + +export default NotificationPage \ No newline at end of file diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx new file mode 100644 index 000000000..413535595 --- /dev/null +++ b/src/components/modules/Notification/index.tsx @@ -0,0 +1,5 @@ +export { default as NotificationPage } from './NotificationPage/NotificationPage' +export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage' +export { default as NotificationItem } from './NotificationItem/NotificationItem' +export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb' +export { default as NotificationHeading } from './NotificationHeading/NotificationHeading' \ 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 index 8bece6668..eb255a3b4 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss @@ -1,27 +1,54 @@ @import '../../../../styles/utilities'; .accountNavigation { - @apply flex; + @apply relative; width: 100%; + @screen md { + @apply flex; + width: 100%; + } + .slider { - @apply inline-block; - width: 0.2rem; - height: 4.8rem; - border-radius: 3px; - background-color: var(--primary); - position: absolute; - left: 11.2rem; - transition: all .2s linear; + @apply hidden; + + @screen md { + @apply inline-block; + width: 0.2rem; + height: 4.8rem; + border-radius: 3px; + background-color: var(--primary); + position: absolute; + left: 0; + top: 450; + transition: all .2s linear; + } } .tabList { - margin-top: 3.8rem; - margin-right: 12.4rem; + @apply flex; + + @screen md { + @apply block; + margin-right: 0rem; + } + + @screen lg { + @apply block; + margin-right: 4.8rem; + } + + @screen xl { + @apply block; + margin-right: 12.4rem; + } } .tabBody { - margin-top: -4.7rem; width: 100%; + + @screen md { + margin-top: -8.6rem; + } } } \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx index 013b4cbf1..4fd534148 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -1,7 +1,6 @@ import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react" import s from './AccountNavigation.module.scss' - -import AccountNavigationItem from './components/AccountNavigationItem' +import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem' import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane' interface AccountNavigationProps { @@ -14,6 +13,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP const sliderRef = useRef(null); const headerRef = useRef(null) + useEffect(() => { + if (defaultActiveIndex !== undefined) { + setActive(defaultActiveIndex) + } + }, [defaultActiveIndex]) + const onTabClick = (index: number) => { setActive(index) } @@ -21,10 +26,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP function slide(index: number) { const active = headerRef.current?.children.item(index)?.getBoundingClientRect() const header = headerRef.current?.getBoundingClientRect() + const firstEl = headerRef.current?.children.item(0)?.getBoundingClientRect() const current = sliderRef.current - if (current && active && header) { - const top = active.top; + if (current && active && header && firstEl) { + const firstElTop = firstEl.top + const top = active.top - firstElTop; current.style.top = top.toString()+"px"; } } @@ -63,7 +70,6 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP }) }
-
) } diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss deleted file mode 100644 index 10037cdc7..000000000 --- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../styles/utilities'; - -.accountNavigationItem { - 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; - } -} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss new file mode 100644 index 000000000..6ae8f42e2 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss @@ -0,0 +1,46 @@ +@import '../../../../../../styles/utilities'; + +.accountNavigationItem { + width: fit-content; + padding: 1.2rem 1.6rem 1.2rem 0rem; + + margin-bottom: 1.2rem; + + &:hover { + @apply cursor-pointer; + } + + &.active { + @apply shape-common font-bold; + background-color: var(--primary); + color: white; + padding: 1.2rem 1.6rem 1.2rem 1.6rem; + margin-right: 1.6rem; + + @screen md { + @apply font-normal; + background-color: #FBFBFB; + border-radius: 0 1.6rem 1.6rem 0; + color: #3D3D3D; + clip-path: none; + } + } + + @screen md { + max-width: 24rem; + min-width: 22rem; + padding: 1.2rem 1.6rem 1.2rem 1.6rem; + } + + @screen lg { + max-width: 26rem; + min-width: 23rem; + padding: 1.2rem 1.6rem 1.2rem 1.6rem; + } + + @screen xl { + max-width: 28rem; + min-width: 24rem; + padding: 1.2rem 1.6rem 1.2rem 1.6rem; + } +} \ 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/AccountNavigationItem.tsx similarity index 100% rename from src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx rename to src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.tsx diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss index 3f8307750..5eece6c80 100644 --- a/src/components/modules/account/AccountPage/AccountPage.module.scss +++ b/src/components/modules/account/AccountPage/AccountPage.module.scss @@ -6,6 +6,8 @@ margin-top: -3.2rem; padding-top: 3.2rem; padding-bottom: 3.2rem; + min-height: 70rem; + @screen md { padding-left: 3.2rem; diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index a5a0ef79d..47f5cf955 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -1,18 +1,28 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import s from './AccountPage.module.scss' +import { HeadingCommon, TabPane } from "src/components/common" + import AccountNavigation from '../AccountNavigation/AccountNavigation' -import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon' import AccountInfomation from "./components/AccountInfomation/AccountInfomation" +import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts" import OrderInfomation from './components/OrderInformation/OrderInformation' import EditInfoModal from './components/EditInfoModal/EditInfoModal' -import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane" + +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" +import { useRouter } from "next/router" const waiting = [ { id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -21,6 +31,11 @@ const delivering = [ id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -29,6 +44,11 @@ const delivered = [ id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -45,12 +65,30 @@ let account = { interface AccountPageProps { defaultActiveContent?: "info" | "orders" | "favorites" } +const getTabIndex = (tab?: string): number => { + switch (tab) { + case ACCOUNT_TAB.CUSTOMER_INFO: + return 0; + case ACCOUNT_TAB.ORDER: + return 1; + case ACCOUNT_TAB.FAVOURITE: + return 2; + default: + return 0 + } +} -const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => { - - const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) +const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { + const router = useRouter() + const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); + useEffect(() => { + const query = router.query[QUERY_KEY.TAB] as string + const index = getTabIndex(query) + setActiveTab(index) + }, [router.query[QUERY_KEY.TAB]]) + function showModal() { setModalVisible(true); } @@ -74,7 +112,7 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => { - {/* */} + diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss index 442dae2eb..6e8150f1b 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss @@ -1,13 +1,11 @@ @import '../../../../../../styles/utilities'; .accountInfomation { - @apply flex justify-center items-center; - text-align: center; + @apply block text-center; margin-top: 1.6rem; @screen md { - @apply block; - text-align: left; + @apply text-left; margin-top: 0; } @@ -32,17 +30,29 @@ border: 1px solid var(--disabled); max-width: 39.2rem; min-width: 30rem; + margin: auto; margin-top: 2.4rem; margin-bottom: 2.4rem; + + @screen md { + margin-left: 0; + } } .shippingInfo { @apply heading-3 font-heading; + margin-bottom: .8rem; } .accountAddress { - max-width: 31rem; - min-width: none; + margin: auto; + max-width: 28rem; + + @screen md { + max-width: 31rem; + min-width: none; + margin-left: 0; + } } .editInfoBtn { diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index f24b36216..dac651fea 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -21,34 +21,30 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => { return (
- { -
-
- avatar -
+
+ avatar +
-
- {account.name} -
-
- {account.email} -
+
+ {account.name} +
+
+ {account.email} +
-
+
-
Shipping Infomation
+
Shipping Infomation
-
- {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`} -
+
+ {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`} +
-
- {account.phoneNumber} -
+
+ {account.phoneNumber} +
-
Edit
-
- } +
Edit
) } diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss index be1384ab7..20acd257b 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -5,77 +5,35 @@ @apply bg-white; margin-bottom: 1.6rem; width: 100%; - border: 2px solid #EBEBEB; - border-radius: .8rem; - padding: 1.6rem; } .inputDisable { margin-bottom: 1.6rem; width: 100%; - border: 2px solid #EBEBEB; - border-radius: .8rem; - padding: 1.6rem; - background-color: #EBEBEB; color: #CCCCCC; } - .inputStateWrapper { - @apply bg-white; - margin-bottom: 1.6rem; - margin-right: 1.6rem; - border: 2px solid #EBEBEB; - border-radius: .8rem; - padding: 1.6rem; - - .inputState { - @apply bg-white cursor-pointer; - border: white; - } + .inputState { + @apply bg-white cursor-pointer; + border: white; + margin-right: 0.8rem; + height: fit-content; } .inputPostalCode { @apply bg-white; - margin-bottom: 1.6rem; - border: 2px solid #EBEBEB; - border-radius: .8rem; - padding: 1.6rem; + margin-left: 0.8rem; } .inputPhoneNumber { @apply bg-white; margin-bottom: 4rem; width: 100%; - border: 2px solid #EBEBEB; - border-radius: .8rem; - padding: 1.6rem; + margin-top: 1.6rem; } .buttons { - @apply flex; - - .buttonCancel { - @apply bg-white text-center font-bold custom-border-radius-lg; - color: #141414; - border: 1px solid #141414; - padding: 1.6rem; - margin-right: 1.6rem; - width: 100%; - - &:hover { - @apply cursor-pointer; - } - } - - .buttonSave { - @apply text-center font-bold custom-border-radius-lg; - background-color: var(--primary); - color: white; - padding: 1.6rem; - width: 100%; - &:hover { - @apply cursor-pointer; - } - } + @apply grid grid-cols-2; + grid-gap: 1.6rem; } } \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index d2be8b1a1..4f1b8296b 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -1,10 +1,7 @@ -import classNames from "classnames" -import React, { useState } from "react" +import React from "react" import s from './EditInfoModal.module.scss' -import {ModalCommon, MenuDropdown} from '../../../../../common' - -import {ButtonCommon} from '../../../../../common' +import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common' interface EditInfoModalProps { accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; @@ -14,14 +11,6 @@ interface EditInfoModalProps { const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => { - const [name, setName] = useState(accountInfo.name); - const [email, setEmail] = useState(accountInfo.email); - const [address, setAddress] = useState(accountInfo.address); - const [state, setState] = useState(accountInfo.state); - const [city, setCity] = useState(accountInfo.city); - const [postalCode, setPostalCode] = useState(accountInfo.postalCode); - const [phoneNumber, setPhoneNumber] = useState(accountInfo.phoneNumber); - function saveInfo() { console.log("saved !!!"); @@ -29,51 +18,48 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod } const states = [ - {name: "D1", onClick: () => {setState("D1")}}, - {name: "D2", onClick: () => {setState("D2")}}, - {name: "D3", onClick: () => {setState("D3")}} + {name: "District 1", value: "D1"}, + {name: "District 2", value: "D2"}, + {name: "District 3", value: "D3"} ] return (
-
- {setName(e.target.value)}} /> +
+
-
- {setEmail(e.target.value)}} /> -
-
- {setAddress(e.target.value)}}/> -
-
- {setCity(e.target.value)}} /> -
-
-
- - - -
- - {setPostalCode(e.target.value)}} /> +
+ +
+ +
+
-
- {setPhoneNumber(e.target.value)}} /> +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+
-
Cancel
-
Save
+ Cancel + Save
diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss new file mode 100644 index 000000000..e6eef3499 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss @@ -0,0 +1,5 @@ +@import '../../../../../../styles/utilities'; + +.favouriteProducts { + +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx new file mode 100644 index 000000000..f88605242 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx @@ -0,0 +1,20 @@ +import React from "react" +import s from './FavouriteProducts.module.scss' +import {ProductList} from '../../../../../common' +import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard' + + +interface FavouriteProductsProps { + products: ProductCardProps[]; +} + +const FavouriteProducts = ({ products } : FavouriteProductsProps) => { + + return ( +
+ +
+ ) +} + +export default FavouriteProducts \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss index 0096a67d7..cfa30c6ad 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss @@ -8,6 +8,8 @@ .tabs { margin-top: 3.2rem; + width: 100%; + border-bottom: black; .blank { margin-bottom: 2.4rem; diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx index 76985b9fd..858526f26 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -10,55 +10,50 @@ 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} : OrderInformationProps) => { return (
- { -
-
Order Information
+
Order Information
-
- - -
- { - waiting.map((order, i) => { - return ( - - ) - }) - } - +
+ + +
+ { + waiting.map((order, i) => { + return ( + + ) + }) + } + - -
- { - delivering.map((order, i) => { - return ( - - ) - }) - } - + +
+ { + delivering.map((order, i) => { + return ( + + ) + }) + } + - -
- { - delivered.map((order, i) => { - return ( - - ) - }) - } - - -
-
- } + +
+ { + delivered.map((order, i) => { + return ( + + ) + }) + } + + +
) } diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss index b83b77fd3..44cc3a5c9 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss @@ -1,9 +1,8 @@ @import '../../../../styles/utilities'; .deliveryItem { - @apply flex bg-white items-center custom-border-radius; + @apply flex bg-white items-center shape-common; margin-bottom: 1.6rem; - border: 1px solid var(--primary) } .separator { diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx index fe8f5cdef..a8ccbb69d 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx @@ -9,20 +9,19 @@ import ReOrder from './components/ReOrder/ReOrder' interface DeliveryItemProps { id: string; - status: "waiting" | "delivering" | "delivered"; + status: "Waiting" | "Delivering" | "Delivered"; products: string[]; totalPrice: number; - reOrderLink?: string; } -const DeliveryItem = ({ id, status, products, totalPrice, reOrderLink } : DeliveryItemProps) => { +const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps) => { return (
- +
) } diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss index d50ecd115..5e8cbdd83 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss @@ -2,48 +2,7 @@ .idAndStatus { @apply items-center; - padding: 2.4rem 0 2.4rem 1rem; - - @screen md { - padding: 2.4rem 0 2.4rem 1.2rem; - } - - @screen lg { - padding: 2.4rem 0 2.4rem 2.4rem; - } - - .id { - @apply font-bold; - margin-bottom: .8rem; - } - - .deliveryStatus { - @apply font-bold text-white; - font-size: 1.2rem; - line-height: 2rem; - padding: 0 .8rem; - border-radius: 0.5rem; - width: fit-content; - - &.waiting { - background-color: #D9A645; - } - &.delivering { - background-color: var(--info-dark); - } - &.delivered { - background-color: var(--primary); - } - } -}@import '../../../../../../styles/utilities'; - -.idAndStatus { - @apply items-center; - padding: 2.4rem 0 2.4rem 1rem; - - @screen md { - padding: 2.4rem 0 2.4rem 1.2rem; - } + padding: 2.4rem 0 2.4rem 1.2rem; @screen lg { padding: 2.4rem 0 2.4rem 2.4rem; diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx index 841dd530f..578c94f97 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx @@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss' interface IdAndStatusProps { id?: string; - status: "waiting" | "delivering" | "delivered"; + status: "Waiting" | "Delivering" | "Delivered"; } -const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => { +const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => { return (
@@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
{status} + })}> {status.charAt(0).toUpperCase() + status.slice(1)}
) diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss index b46b528e1..517dd2e4f 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss @@ -1,27 +1,9 @@ @import '../../../../../../styles/utilities'; .reOrder { - @apply text-white custom-border-radius hidden font-bold; - padding: .4rem .6rem; - margin-right: 1rem; - background-color: var(--primary); - - @screen md { - padding: .4rem .6rem; - margin-right: 1.2rem; - } - - @screen lg { - padding: .8rem 1.2rem; - margin-right: 2.4rem; - } - + @apply hidden; + margin-right: 1.2rem; &.show { @apply block; } - - &:hover { - @apply cursor-pointer; - } - } \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx index 2fbc546f4..aaef9153c 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx @@ -1,21 +1,18 @@ import classNames from "classnames" import React from "react" +import { ButtonCommon } from "src/components/common" import s from './ReOrder.module.scss' -import Link from 'next/link' interface ReOrderProps { show: boolean; - href?: string; } -const ReOrder = ({ show=false, href="#" } : ReOrderProps) => { +const ReOrder = ({ show=false } : ReOrderProps) => { return (
- - Re-Order - + Re-Order
) } diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss index 9a4f795b3..e987f30c1 100644 --- a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss +++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss @@ -2,11 +2,7 @@ .totalPrice { margin-left: auto; - margin-right: 1rem; - - @screen md { - margin-right: 1.2rem; - } + margin-right: 1.2rem; @screen lg { margin-right: 2.4rem; diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss index bb65a2549..ed8c5c7a7 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss +++ b/src/components/modules/home/HomeBanner/HomeBanner.module.scss @@ -31,15 +31,12 @@ width: min-content; color: var(--white); - font-size: 7rem; + font-size: 8.8rem; line-height: 8rem; letter-spacing: -0.03em; font-weight: bold; text-transform: uppercase; - @screen 2xl { - line-height: 8rem; - } &::after { @apply absolute; content: ""; diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 1753edf99..3275bfb3b 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -1,16 +1,5 @@ @import "../../../../styles/utilities"; .homeFeature { - @apply spacing-horizontal; - background-color: #ffffff; - height: fit-content; - margin: 3.2rem auto; - @screen md { - @apply grid grid-cols-3; - grid-gap: 2.4rem; - margin: 6.4rem auto; - } - @screen md { - grid-gap: 4rem; - } + @apply spacing-horizontal-left bg-white; } diff --git a/src/components/modules/home/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx index af6ec7287..d8851aa30 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.tsx +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -1,25 +1,34 @@ import React from 'react' import s from './HomeFeature.module.scss' -import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem' +import FirstPic from './assets/10h30-11h.png' +import SecondPic from './assets/8h.png' +import ThirdPic from './assets/green.png' -const HomeFeature = () => { +import HomeFeatureCarousel from './components/HomeFeatureCarousel/HomeFeatureCarousel' + +const CAROUSEL_DATA = [ + { + image: FirstPic, + children: Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm., + }, + { + image: SecondPic, + children: Most fresh fish and seafood will be listed at 8am from inventory., + }, + { + image: ThirdPic, + children: Show that food will be shipped in a greengrocery plastic bag., + }, +] + +const HomeFeature = () => { return ( -
- - Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm. - - - - Most fresh fish and seafood will be listed at 8am from inventory. - - - - Show that food will be shipped in a greengrocery plastic bag. - -
+
+ +
) } -export default HomeFeature +export default HomeFeature \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png b/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png deleted file mode 100644 index 871e0e15b..000000000 Binary files a/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png and /dev/null differ diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png b/src/components/modules/home/HomeFeature/assets/10h30-11h.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png rename to src/components/modules/home/HomeFeature/assets/10h30-11h.png diff --git a/src/components/modules/home/HomeFeature/assets/8h-mobile.png b/src/components/modules/home/HomeFeature/assets/8h-mobile.png deleted file mode 100644 index e734cf1e5..000000000 Binary files a/src/components/modules/home/HomeFeature/assets/8h-mobile.png and /dev/null differ diff --git a/src/components/modules/home/HomeFeature/assets/8h-desktop.png b/src/components/modules/home/HomeFeature/assets/8h.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/8h-desktop.png rename to src/components/modules/home/HomeFeature/assets/8h.png diff --git a/src/components/modules/home/HomeFeature/assets/green-desktop.png b/src/components/modules/home/HomeFeature/assets/green.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/green-desktop.png rename to src/components/modules/home/HomeFeature/assets/green.png diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx new file mode 100644 index 000000000..32f545020 --- /dev/null +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import { TOptionsEvents } from 'keen-slider' + +import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem' +import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon' + +interface HomeFeatureCarouselProps + extends Omit, 'Component' | "option"> { + option?: TOptionsEvents +} + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1.8, + }, + '(min-width: 768px)': { + slidesPerView: 2.1, + }, + '(min-width: 1008px)': { + slidesPerView: 2.3, + }, + '(min-width: 1280px)': { + slidesPerView: 2.8, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + }, + } + +const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps) => { + return ( +
+ + data={data} + Component={HomeFeatureItem} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) + +} + +export default HomeFeatureCarousel \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index d3dcb518b..c0b8d49ba 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -1,56 +1,18 @@ @import "../../../../../../styles/utilities"; .homeFeatureItem { - @apply flex items-center; - width: fit-content; - margin: auto; - - @screen md { - @apply flex flex-col items-center justify-between; - } - - @screen lg { - @apply flex flex-row; - } + @apply flex items-center justify-center; + margin-right: 0.8rem; + height: 100%; .itemImg { - @apply flex float-left clear-both; margin-right: 2.4rem; - align-items: center; - &.firstImg { - margin-top: 1rem; - content: url("../../assets/10h30-11h-desktop.png"); - } - &.secondImg { - margin-top: 1rem; - content: url("../../assets/8h-desktop.png"); - } - &.thirdImg { - margin-top: 1rem; - content: url("../../assets/green-desktop.png"); - } - - @screen md { - @apply flex flex-col justify-center items-center; - margin: auto; - margin-top: 0.8rem; - } - - @screen lg { - @apply flex float-left clear-both; - margin-right: 2.4rem; - margin-top: 0; - } + max-width: 12rem; + min-width: 8rem; } .itemText { max-width: 28rem; - min-width: 12rem; - @screen md { - @apply text-center; - } - @screen lg { - @apply text-left; - } + min-width: none; } } diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index eb566bdc9..3cc2db47f 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -1,21 +1,21 @@ import React from 'react' -import classNames from 'classnames' import s from './HomeFeatureItem.module.scss' +import { StaticImage } from 'src/components/common' -interface HomeFeatureItemProps { - image: string; - children: any; +export interface HomeFeatureItemProps { + image: StaticImageData; + children: React.ReactNode; } const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { return (
- home feature item img +
+ +
+
{children}
) diff --git a/src/styles/_base.scss b/src/styles/_base.scss index e8719581f..a3ba0a6db 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap"); +@import '../../public/fonts/style.css'; :root { --primary: #5b9a74; @@ -41,7 +42,7 @@ --line-height: 2.4rem; --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; - --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; + --font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; } @@ -79,6 +80,3 @@ html { font-feature-settings: "case" 1, "rlig" 1, "calt" 0; } -a { - -webkit-tap-highlight-color: var(--primary); -} diff --git a/tailwind.config.js b/tailwind.config.js index ec9f0e5d1..9d51fd1ba 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -122,7 +122,7 @@ module.exports = { 'xl': '1280px', // => @media (min-width: 1280px) { ... } - '2xl': '1536px', + '2xl': '1440px', // => @media (min-width: 1536px) { ... } }, caroucel: {