From 432c7b403c1263806f60e0f275d23cb17d9c9c19 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 14:10:55 +0700 Subject: [PATCH 1/8] :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 fc39eb17589c9bb3449b60a5829594f04342ccfb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 6 Sep 2021 17:06:06 +0700 Subject: [PATCH 2/8] :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}
-