diff --git a/pages/404.tsx b/pages/404.tsx
index 38a01bcc4..7fb30b9de 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,25 +1,4 @@
-import type { GetStaticPropsContext } from 'next'
-import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
-
-export async function getStaticProps({
- preview,
- locale,
- locales,
-}: GetStaticPropsContext) {
- const config = { locale, locales }
- const { pages } = await commerce.getAllPages({ config, preview })
- const { categories, brands } = await commerce.getSiteInfo({ config, preview })
- return {
- props: {
- pages,
- categories,
- brands,
- },
- revalidate: 200,
- }
-}
-
export default function NotFound() {
return (
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
deleted file mode 100644
index a8a24b3aa..000000000
--- a/pages/[...pages].tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type {
- GetStaticPathsContext,
- GetStaticPropsContext,
- InferGetStaticPropsType,
-} from 'next'
-import commerce from '@lib/api/commerce'
-import { Text } from '@components/ui'
-import { Layout } from '@components/common'
-import getSlug from '@lib/get-slug'
-import { missingLocaleInPages } from '@lib/usage-warns'
-import type { Page } from '@commerce/types/page'
-import { useRouter } from 'next/router'
-
-export async function getStaticProps({
- preview,
- params,
- locale,
- locales,
-}: GetStaticPropsContext<{ pages: string[] }>) {
- const config = { locale, locales }
- const pagesPromise = commerce.getAllPages({ config, preview })
- const siteInfoPromise = commerce.getSiteInfo({ config, preview })
- const { pages } = await pagesPromise
- const { categories } = await siteInfoPromise
- const path = params?.pages.join('/')
- const slug = locale ? `${locale}/${path}` : path
- const pageItem = pages.find((p: Page) =>
- p.url ? getSlug(p.url) === slug : false
- )
- const data =
- pageItem &&
- (await commerce.getPage({
- variables: { id: pageItem.id! },
- config,
- preview,
- }))
-
- const page = data?.page
-
- if (!page) {
- // We throw to make sure this fails at build time as this is never expected to happen
- throw new Error(`Page with slug '${slug}' not found`)
- }
-
- return {
- props: { pages, page, categories },
- revalidate: 60 * 60, // Every hour
- }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
- const config = { locales }
- const { pages }: { pages: Page[] } = await commerce.getAllPages({ config })
- const [invalidPaths, log] = missingLocaleInPages()
- const paths = pages
- .map((page) => page.url)
- .filter((url) => {
- if (!url || !locales) return url
- // If there are locales, only include the pages that include one of the available locales
- if (locales.includes(getSlug(url).split('/')[0])) return url
-
- invalidPaths.push(url)
- })
- log()
-
- return {
- paths,
- fallback: 'blocking',
- }
-}
-
-export default function Pages({
- page,
-}: InferGetStaticPropsType
) {
- const router = useRouter()
-
- return router.isFallback ? (
- Loading...
// TODO (BC) Add Skeleton Views
- ) : (
-
- {page?.body && }
-
- )
-}
-
-Pages.Layout = Layout
diff --git a/pages/cart.tsx b/pages/cart.tsx
deleted file mode 100644
index b9659d21b..000000000
--- a/pages/cart.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-// import useCart from '@framework/cart/use-cart'
-// import usePrice from '@framework/product/use-price'
-// import { Button, Text } from '@components/ui'
-// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
-// import { CartItem } from '@components/cart'
-
-export async function getStaticProps({
- preview,
- locale,
- locales,
-}: GetStaticPropsContext) {
- const config = { locale, locales }
- const pagesPromise = commerce.getAllPages({ config, preview })
- const siteInfoPromise = commerce.getSiteInfo({ config, preview })
- const { pages } = await pagesPromise
- const { categories } = await siteInfoPromise
- return {
- props: { pages, categories },
- }
-}
-
-export default function Cart() {
- // const error = null
- // const success = null
- // const { data, isLoading, isEmpty } = useCart()
-
- // const { price: subTotal } = usePrice(
- // data && {
- // amount: Number(data.subtotalPrice),
- // currencyCode: data.currency.code,
- // }
- // )
- // const { price: total } = usePrice(
- // data && {
- // amount: Number(data.totalPrice),
- // currencyCode: data.currency.code,
- // }
- // )
-
- return (
-
- This is cart page
-
- )
-}
-
-Cart.Layout = Layout
diff --git a/pages/demo.tsx b/pages/demo.tsx
new file mode 100644
index 000000000..f23c10583
--- /dev/null
+++ b/pages/demo.tsx
@@ -0,0 +1,17 @@
+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';
+
+
+
+export default function Demo() {
+ return <>
+
+
+
+
+
+ >
+}
+
+Demo.Layout = Layout
diff --git a/pages/index.tsx b/pages/index.tsx
index 127e33202..daabf0cf1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,41 +1,36 @@
-
import { Layout } from 'src/components/common';
-import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
-const CATEGORY = [
+import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import {SelectCommon} from 'src/components/common'
+
+const OPTION_SORT = [
{
- name: 'All',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+ name: "By Name"
},
{
- name: 'Veggie',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+ name: "Price (High to Low)"
},
{
- name: 'Seafood',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
- },
- {
- name: 'Frozen',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
- },
- {
- name: 'Coffee Bean',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
- },
- {
- name: 'Sauce',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
- },
+ name: "On Sale"
+ }
]
+
export default function Home() {
return (
<>
-
-
+ {/*
+
+
+
+
-
+
+ */}
+ Sort By
+ Sort By
+
+ {/* // todo: uncomment */}
+ {/* */}
>
)
}
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index c5bcbdba1..c34394af5 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,76 +1,16 @@
-import { Layout } from '@components/common'
-import commerce from '@lib/api/commerce'
-import type {
- GetStaticPathsContext,
- GetStaticPropsContext,
- InferGetStaticPropsType
-} from 'next'
-import { useRouter } from 'next/router'
-export async function getStaticProps({
- params,
- locale,
- locales,
- preview,
-}: GetStaticPropsContext<{ slug: string }>) {
- const config = { locale, locales }
- const pagesPromise = commerce.getAllPages({ config, preview })
- const siteInfoPromise = commerce.getSiteInfo({ config, preview })
- const productPromise = commerce.getProduct({
- variables: { slug: params!.slug },
- config,
- preview,
- })
+import { Layout, RecipeDetail } from 'src/components/common'
+import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
- const allProductsPromise = commerce.getAllProducts({
- variables: { first: 4 },
- config,
- preview,
- })
- const { pages } = await pagesPromise
- const { categories } = await siteInfoPromise
- const { product } = await productPromise
- const { products: relatedProducts } = await allProductsPromise
-
- if (!product) {
- throw new Error(`Product with slug '${params!.slug}' not found`)
- }
-
- return {
- props: {
- pages,
- product,
- relatedProducts,
- categories,
- },
- revalidate: 200,
- }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
- const { products } = await commerce.getAllProductPaths()
-
- return {
- paths: locales
- ? locales.reduce((arr, locale) => {
- // Add a product path for every locale
- products.forEach((product: any) => {
- arr.push(`/${locale}/product${product.path}`)
- })
- return arr
- }, [])
- : products.map((product: any) => `/product${product.path}`),
- fallback: 'blocking',
- }
-}
-
-export default function Slug({
- product,
- relatedProducts,
-}: InferGetStaticPropsType) {
- const router = useRouter()
-
- return This is product page
+export default function Slug() {
+ return <>
+
+
+
+
+
+ >
}
Slug.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index 0075d7c2c..970588581 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,81 +1,24 @@
-
-import { Layout } from 'src/components/common';
-import { RecipesListPage } from 'src/components/modules/recipes';
-import { BlogDetailImg } from 'src/components/modules/blogs';
-import BlogDetail from '../src/components/modules/blogs/BlogDetailImg/img/blogdetail.png';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
-import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
-const CATEGORY = [
- {
- name: 'All',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${OPTION_ALL}`,
- },
- {
- name: 'Veggie',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=veggie`,
- },
- {
- name: 'Seafood',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=seafood`,
- },
- {
- name: 'Frozen',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=frozen`,
- },
- {
- name: 'Coffee Bean',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=coffee-bean`,
- },
- {
- name: 'Sauce',
- link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=sauce`,
- },
-];
-// const BRANDS = [
-
-// {
-// name: 'Maggi',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-// },
-// {
-// name: 'Chomilex',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chomilex`,
-// },
-// {
-// name: 'Chinsu',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
-// }
-// ];
-
-// const FEATURED = [
-
-// {
-// name: 'Best Sellers',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best-sellers`,
-// },
-// {
-// name: 'Sales',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`,
-// },
-// {
-// name: 'New Item',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new-item`,
-// },
-// {
-// name: 'Viewed',
-// link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`,
-// }
-// ]
+import { useState } from 'react'
+import {
+ ButtonCommon,
+ Layout, ModalInfo
+} from 'src/components/common'
export default function Test() {
+ const [visible, setVisible] = useState(false)
+ const onClose = () => {
+ setVisible(false)
+ }
+ const onOpen = () => {
+ setVisible(true)
+ }
return (
<>
- {/* */}
- {/* */}
- {/* */}
- {/* */}
-
- {/* */}
+ open
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
+
>
)
}
+Test.Layout = Layout
diff --git a/public/assets/images/image10.png b/public/assets/images/image10.png
new file mode 100644
index 000000000..5cdeb5ba9
Binary files /dev/null and b/public/assets/images/image10.png differ
diff --git a/public/assets/images/image11.png b/public/assets/images/image11.png
new file mode 100644
index 000000000..6f4d76275
Binary files /dev/null and b/public/assets/images/image11.png differ
diff --git a/public/assets/images/image12.png b/public/assets/images/image12.png
new file mode 100644
index 000000000..51bfbfef8
Binary files /dev/null and b/public/assets/images/image12.png differ
diff --git a/public/assets/images/image13.png b/public/assets/images/image13.png
new file mode 100644
index 000000000..442fbeee5
Binary files /dev/null and b/public/assets/images/image13.png differ
diff --git a/public/assets/images/image14.png b/public/assets/images/image14.png
new file mode 100644
index 000000000..e3598610a
Binary files /dev/null and b/public/assets/images/image14.png differ
diff --git a/public/assets/images/image5.png b/public/assets/images/image5.png
new file mode 100644
index 000000000..ed9da336b
Binary files /dev/null and b/public/assets/images/image5.png differ
diff --git a/public/assets/images/image6.png b/public/assets/images/image6.png
new file mode 100644
index 000000000..9598aabdb
Binary files /dev/null and b/public/assets/images/image6.png differ
diff --git a/public/assets/images/image7.png b/public/assets/images/image7.png
new file mode 100644
index 000000000..25dcf3b21
Binary files /dev/null and b/public/assets/images/image7.png differ
diff --git a/public/assets/images/image8.png b/public/assets/images/image8.png
new file mode 100644
index 000000000..99e966722
Binary files /dev/null and b/public/assets/images/image8.png differ
diff --git a/public/assets/images/image9.png b/public/assets/images/image9.png
new file mode 100644
index 000000000..cf40c6af7
Binary files /dev/null and b/public/assets/images/image9.png differ
diff --git a/src/components/common/Banner/Banner.module.scss b/src/components/common/Banner/Banner.module.scss
index f4b374dd0..e69de29bb 100644
--- a/src/components/common/Banner/Banner.module.scss
+++ b/src/components/common/Banner/Banner.module.scss
@@ -1,52 +0,0 @@
-@import "../../../styles/utilities";
-
-.banner {
- @apply bg-primary-light custom-border-radius-lg overflow-hidden;
- @screen md {
- border: 1px solid var(--primary);
- }
- &.large {
- margin-bottom: 2.8rem;
- .inner {
- @screen xl {
- @apply bg-right-bottom;
- background-size: unset;
- }
- }
- }
- .inner {
- @apply bg-no-repeat;
- background-size: 90%;
- background-position: right -500% bottom 0%;
- .content {
- background-image: linear-gradient(
- to right,
- rgb(227, 242, 233, 0.9),
- rgb(227, 242, 233, 0.5) 80%,
- rgb(227, 242, 233, 0)
- );
- padding: 1.6rem;
- max-width: 37rem;
- @screen md {
- max-width: 49.6rem;
- padding: 4.8rem;
- }
- .top {
- .heading {
- @apply heading-1 font-heading;
- margin-bottom: 1.6rem;
- }
- .subHeading {
- @apply sub-headline;
- @screen md {
- @apply caption;
- }
- }
- }
-
- .bottom {
- margin-top: 4rem;
- }
- }
- }
-}
diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
index a953052b6..1dbc04d9f 100644
--- a/src/components/common/Banner/Banner.tsx
+++ b/src/components/common/Banner/Banner.tsx
@@ -1,47 +1,24 @@
-import classNames from 'classnames'
-import Link from 'next/link'
import React, { memo } from 'react'
-import { IconArrowRight } from 'src/components/icons'
-import { ROUTE } from 'src/utils/constanst.utils'
-import { LANGUAGE } from 'src/utils/language.utils'
-import ButtonCommon from '../ButtonCommon/ButtonCommon'
-import s from './Banner.module.scss'
+import CarouselCommon from '../CarouselCommon/CarouselCommon'
+import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
interface Props {
- imgLink: string,
- title: string,
- subtitle: string,
- buttonLabel?: string,
- linkButton?: string,
- size?: 'small' | 'large',
+ data: BannerItemProps[],
}
-const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: Props) => {
+const option = {
+ slidesPerView: 1,
+ breakpoints: {}
+}
+const Banner = memo(({ data }: Props) => {
return (
-
-
-
-
-
- {title}
-
-
- {subtitle}
-
-
-
-
-
-
+
+ data={data}
+ itemKey="banner"
+ Component={BannerItem}
+ option={option}
+ isDot = {true}
+ />
)
})
diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss
new file mode 100644
index 000000000..72690f92d
--- /dev/null
+++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss
@@ -0,0 +1,52 @@
+@import "../../../../styles/utilities";
+
+.bannerItem {
+ @apply bg-primary-light custom-border-radius-lg overflow-hidden;
+ @screen md {
+ border: 1px solid var(--primary);
+ }
+ &.large {
+ margin-bottom: 2.8rem;
+ .inner {
+ @screen xl {
+ @apply bg-right-bottom;
+ background-size: unset;
+ }
+ }
+ }
+ .inner {
+ @apply bg-no-repeat;
+ background-size: 90%;
+ background-position: right -500% bottom 0%;
+ .content {
+ background-image: linear-gradient(
+ to right,
+ rgb(227, 242, 233, 0.9),
+ rgb(227, 242, 233, 0.5) 80%,
+ rgb(227, 242, 233, 0)
+ );
+ padding: 1.6rem;
+ max-width: 37rem;
+ @screen md {
+ max-width: 49.6rem;
+ padding: 4.8rem;
+ }
+ .top {
+ .heading {
+ @apply heading-1 font-heading;
+ margin-bottom: 1.6rem;
+ }
+ .subHeading {
+ @apply sub-headline;
+ @screen md {
+ @apply caption;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 4rem;
+ }
+ }
+ }
+}
diff --git a/src/components/common/Banner/BannerItem/BannerItem.tsx b/src/components/common/Banner/BannerItem/BannerItem.tsx
new file mode 100644
index 000000000..c7516d362
--- /dev/null
+++ b/src/components/common/Banner/BannerItem/BannerItem.tsx
@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { IconArrowRight } from 'src/components/icons'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import ButtonCommon from '../../ButtonCommon/ButtonCommon'
+import s from './BannerItem.module.scss'
+
+export interface BannerItemProps {
+ imgLink: string,
+ title: string,
+ subtitle: string,
+ buttonLabel?: string,
+ linkButton?: string,
+ size?: 'small' | 'large',
+}
+
+const BannerItem = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: BannerItemProps) => {
+ return (
+
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+
+
+
+ )
+})
+
+export default BannerItem
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index d72ea413b..95c8526e1 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -2,4 +2,10 @@
.breadcrumbCommon {
color: var(--text-base);
+<<<<<<< HEAD
+=======
+ .currentItem {
+ cursor: default;
+ }
+>>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
}
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 3523a26b7..6ad2e6817 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -1,65 +1,36 @@
import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
import s from './BreadcrumbCommon.module.scss'
-
import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
interface BreadcrumbCommonProps {
- crumbs: { link:string, name:string }[];
+ crumbs: { link: string, name: string }[];
showHomePage?: boolean;
}
-const BreadcrumbCommon = ({ crumbs, showHomePage=true } : BreadcrumbCommonProps) => {
- console.log(crumbs);
+const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
return (
{
- showHomePage && crumbs[0].link==="/" && crumbs.map((crumb, i) => {
- if (i === 0) {
- return (
-
- )
- }
- if (i === crumbs.length-1) {
- return (
-
- {crumb.name}
-
- )
- }
- return (
-
-
-
- )
- })
- }
- {
- !showHomePage && crumbs.map((crumb, i) => {
- if (i === 0) {
- return
- }
- if (i === 1) {
- return (
-
- )
- }
- if (i === crumbs.length-1) {
- return (
-
- {crumb.name}
-
- )
- }
- return (
-
-
-
- )
- })
+ showHomePage &&
}
-
+ {
+ crumbs.length > 0 && <>
+
+ {
+ crumbs.slice(0, crumbs.length - 1).map((crumb) => (
+ < BreadcrumbSeparator key={crumb.name}>
+
+
+ ))}
+ < BreadcrumbSeparator>
+ {crumbs[crumbs.length - 1].name}
+
+ >
+ }
+
)
}
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
new file mode 100644
index 000000000..3a785f480
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
@@ -0,0 +1,5 @@
+.breadcrumbItem {
+ &:hover {
+ color: var(--primary);
+ }
+}
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
index f807de555..13f980ea9 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import Link from 'next/link'
+import s from './BreadcrumbItem.module.scss'
interface BreadcrumbItemProps {
text: string;
@@ -9,7 +10,7 @@ interface BreadcrumbItemProps {
const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
return (
- {text}
+ {text}
)
}
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 324035ade..c7b9f1ffa 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -5,7 +5,13 @@
display: flex;
justify-content: center;
align-items: center;
- padding: 1.2rem 3.2rem;
+ padding: 1rem 2rem;
+ @screen md {
+ padding: 0.8rem 1.6rem;
+ }
+ @screen lg {
+ padding: 0.8rem 3.2rem;
+ }
&:disabled {
filter: brightness(0.9);
cursor: not-allowed;
@@ -63,7 +69,7 @@
border: 1px solid var(--primary);
&.loading {
&::before {
- border-top-color: var(--primary);
+ border-top-color: var(--text-active);
}
}
}
@@ -76,9 +82,18 @@
}
&.large {
- padding: 1.6rem 4.8rem;
+ padding: 1rem 1.5rem;
&.onlyIcon {
- padding: 1.6rem;
+ padding: 1rem;
+ }
+ @screen md {
+ padding: 1.6rem 3.2rem;
+ &.onlyIcon {
+ padding: 1.6rem;
+ }
+ }
+ @screen lg {
+ padding: 1.6rem 4.8rem;
}
&.loading {
&::before {
@@ -97,10 +112,6 @@
.icon {
margin: 0 1.6rem 0 0;
- }
-
- .label,
- .icon {
svg path {
fill: currentColor;
}
diff --git a/src/components/common/CarouselCommon/CaroucelCommon.module.scss b/src/components/common/CarouselCommon/CaroucelCommon.module.scss
deleted file mode 100644
index b1cc3e01e..000000000
--- a/src/components/common/CarouselCommon/CaroucelCommon.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.navigation_wrapper{
- @apply relative;
- min-height: theme("caroucel.arrow-height") ;
-
-}
\ No newline at end of file
diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss
new file mode 100644
index 000000000..da306f38f
--- /dev/null
+++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss
@@ -0,0 +1,57 @@
+@import '../../../styles/utilities';
+.navigationWrapper {
+ @apply relative;
+ min-height: theme('caroucel.arrow-height');
+ .isPadding {
+ @apply spacing-horizontal;
+ }
+ :global(.customArrow) {
+ width: 64px;
+ height: 64px;
+ &:focus {
+ outline: none;
+ }
+ @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+ &:global(.leftArrow) {
+ @apply hidden left-0;
+ @screen md {
+ @apply flex
+ }
+ }
+ &:global(.rightArrow) {
+ @apply hidden right-0;
+ @screen md {
+ @apply flex;
+ }
+ }
+ &:global(.isDisabledArrow) {
+ @apply hidden;
+ }
+ }
+ :global {
+ .dots {
+ display: flex;
+ padding: 1rem 0;
+ justify-content: center;
+ }
+
+ .dot {
+ border: none;
+ width: 1rem;
+ height: 1rem;
+ background: #c5c5c5;
+ border-radius: 50%;
+ margin: 0 0.5rem;
+ padding: 0.5rem;
+ cursor: pointer;
+ }
+
+ .dot:focus {
+ outline: none;
+ }
+
+ .dot.active {
+ background: #000;
+ }
+ }
+}
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index 074295533..136c323f3 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -1,25 +1,55 @@
import { useKeenSlider } from 'keen-slider/react'
-import React from 'react'
+import React, { useEffect } from 'react'
import 'keen-slider/keen-slider.min.css'
-import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow';
-import s from "./CaroucelCommon.module.scss"
-interface CarouselCommonProps {
- children?: React.ReactNode
- data?: any[]
- Component: React.ComponentType
- isArrow?:Boolean
- itemKey:String
+import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
+import s from './CarouselCommon.module.scss'
+import { TOptionsEvents } from 'keen-slider'
+import classNames from 'classnames'
+import CustomDot from './CustomDot/CustomDot'
+export interface CarouselCommonProps {
+ data: T[]
+ Component: React.ComponentType
+ isArrow?: Boolean
+ isDot?: Boolean
+ itemKey: String
+ option: TOptionsEvents
+ keenClassname?: string
+ isPadding?: boolean
}
-const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
+const CarouselCommon = ({
+ data,
+ Component,
+ itemKey,
+ keenClassname,
+ isPadding = false,
+ isArrow = true,
+ isDot = false,
+ option: { slideChanged,slidesPerView, ...sliderOption },
+}: CarouselCommonProps) => {
const [currentSlide, setCurrentSlide] = React.useState(0)
+ // const [dotActive, setDotActive] = React.useState(0)
+ const [dotArr, setDotArr] = React.useState([])
const [sliderRef, slider] = useKeenSlider({
- slidesPerView: 1,
- initial: 0,
+ ...sliderOption,
+ slidesPerView,
slideChanged(s) {
setCurrentSlide(s.details().relativeSlide)
},
})
+
+ useEffect(() => {
+ if(isDot && slider && data){
+ let array:number[]
+ let number = data.length - Math.floor(slider.details().slidesPerView - 1)
+ if(number<1){
+ number = 1
+ }
+ array = [...Array(number).keys()]
+ setDotArr(array)
+ }
+ }, [isDot,slider,data])
+
const handleRightArrowClick = () => {
slider.next()
}
@@ -27,29 +57,45 @@ const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
const handleLeftArrowClick = () => {
slider.prev()
}
+
+ const onDotClick = (index:number) => {
+ slider.moveToSlideRelative(index)
+ }
return (
-
-
- {data?.map((props,index) => (
+
+
+ {data?.map((props, index) => (
))}
- {slider && (
- <>
-
-
- >
- )}
+ {slider && isArrow && (
+ <>
+
+
+ >
+ )}
+ {slider && isDot && (
+
+ {dotArr.map((index) => {
+ return (
+
+ )
+ })}
+
+ )}
)
}
diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
index ec1bf0d88..139597f9c 100644
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
@@ -1,17 +1,2 @@
-.custom_arrow{
- width: 64px;
- height: 64px;
- &:focus{
- outline: none;
- }
- @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
- &.left{
- @apply left-0;
- }
- &.right{
- @apply right-0;
- }
- &.isDisabled{
- @apply hidden ;
- }
-}
+
+
diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
index 779591671..853188f4a 100644
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
@@ -2,11 +2,12 @@ import classNames from 'classnames'
import React from 'react'
import ArrowLeft from 'src/components/icons/ArrowLeft'
import ArrowRight from 'src/components/icons/ArrowRight'
-import s from "./CustomCarouselArrow.module.scss"
+import "./CustomCarouselArrow.module.scss"
+
interface CustomCarouselArrowProps
extends React.ButtonHTMLAttributes
{
side: 'left' | 'right'
- isDisabled:Boolean
+ isDisabled?:Boolean
}
export const CustomCarouselArrow = ({
@@ -16,7 +17,7 @@ export const CustomCarouselArrow = ({
return (
diff --git a/src/components/common/CarouselCommon/CustomDot/CustomDot.tsx b/src/components/common/CarouselCommon/CustomDot/CustomDot.tsx
new file mode 100644
index 000000000..7c3615c45
--- /dev/null
+++ b/src/components/common/CarouselCommon/CustomDot/CustomDot.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface Props {
+ index: number
+ dotActive:number
+ onClick: (index: number) => void
+}
+
+const CustomDot = ({ index, onClick, dotActive }: Props) => {
+ const handleOnClick = () => {
+ onClick && onClick(index)
+ }
+ return (
+
+ )
+}
+
+export default CustomDot
diff --git a/src/components/common/CollectionHeading/CollectionHeading.module.scss b/src/components/common/CollectionHeading/CollectionHeading.module.scss
index 57c233ea0..870eda782 100644
--- a/src/components/common/CollectionHeading/CollectionHeading.module.scss
+++ b/src/components/common/CollectionHeading/CollectionHeading.module.scss
@@ -1,3 +1,5 @@
.subtitle {
+ font-size: var(--font-size);
+ line-height: var(--line-height);
margin-top: .4rem;
}
\ No newline at end of file
diff --git a/src/components/common/CollectionHeading/CollectionHeading.tsx b/src/components/common/CollectionHeading/CollectionHeading.tsx
index 3655d6561..e9ba5f303 100644
--- a/src/components/common/CollectionHeading/CollectionHeading.tsx
+++ b/src/components/common/CollectionHeading/CollectionHeading.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import s from './CollectionHeading.module.scss'
import HeadingCommon from '../HeadingCommon/HeadingCommon'
-interface CollectionHeadingProps {
+export interface CollectionHeadingProps {
type?: 'default' | 'highlight' | 'light';
title: string;
subtitle: string;
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
new file mode 100644
index 000000000..eefd101c4
--- /dev/null
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
@@ -0,0 +1,61 @@
+@import '../../../styles/utilities';
+.featuredProductCardWarpper{
+ width: 59.8rem;
+ height: 28.8rem;
+ padding: 2.4rem;
+ @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+ .left{
+ width: 24rem;
+ height: 24rem;
+ }
+ .right{
+ padding-left: 2.4rem;
+ min-width: 27rem;
+ max-width: 28.6rem;
+ min-height: 16.8rem;
+ @apply flex justify-between flex-col;
+ .rightTop{
+ min-height: 9.6rem;
+ @apply flex justify-between flex-col;
+ .title{
+ @apply font-bold;
+ font-size: 2rem;
+ line-height: 2.8rem;
+ letter-spacing: -0.01em;
+ color: var(--text-active);
+ }
+ .subTitle{
+ color: var(--text-base);
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ }
+ .priceWrapper{
+ @apply flex justify-start;
+ .price{
+ @apply font-bold;
+ font-size: 2rem;
+ line-height: 2.8rem;
+ letter-spacing: -0.01em;
+ color: var(--text-active);
+ }
+ .originPrice{
+ margin-left: 0.8rem;
+ font-size: 2rem;
+ line-height: 2.8rem;
+ color: var(--text-label);
+ text-decoration-line: line-through;
+ }
+ }
+ }
+ .buttonWarpper{
+ @apply flex;
+ .icon{
+ width: 5.6rem;
+ }
+ .button{
+ margin-left: 0.8rem;
+ width: 20.6rem;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
new file mode 100644
index 000000000..fb3d82d41
--- /dev/null
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { FeaturedProductProps } from 'src/utils/types.utils'
+import s from './FeaturedProductCard.module.scss'
+import { LANGUAGE } from '../../../utils/language.utils'
+import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+interface FeaturedProductCardProps extends FeaturedProductProps {
+ buttonText?: string
+}
+
+const FeaturedProductCard = ({
+ imageSrc,
+ title,
+ subTitle,
+ price,
+ originPrice,
+ buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW,
+}: FeaturedProductCardProps) => {
+ return (
+
+
+

+
+
+
+
{title}
+
{subTitle}
+
+
{price}
+
{originPrice}
+
+
+
+
+
+
+
+ {buttonText}
+
+
+
+
+ )
+}
+
+export default FeaturedProductCard
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index dfce58b57..a9926f765 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,19 +1,20 @@
import classNames from 'classnames'
import React, { memo, useEffect, useState } from 'react'
+import { useModalCommon } from 'src/components/hooks'
import { isMobile } from 'src/utils/funtion.utils'
+import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
+import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
import HeaderMenu from './components/HeaderMenu/HeaderMenu'
import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
import s from './Header.module.scss'
-interface Props {
- className?: string
- children?: any
-}
-const Header = memo(({ }: Props) => {
+const Header = memo(() => {
const [isFullHeader, setIsFullHeader] = useState(true)
+ const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
+ const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
useEffect(() => {
window.addEventListener('scroll', handleScroll)
@@ -36,11 +37,15 @@ const Header = memo(({ }: Props) => {
+
+
>
)
})
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 8f19b11e8..969964608 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -1,30 +1,40 @@
import classNames from 'classnames'
import Link from 'next/link'
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import s from './HeaderMenu.module.scss'
-const OPTION_MENU = [
- {
- link: ROUTE.ACCOUNT,
- name: 'Account',
- },
- {
- link: '/',
- name: 'Logout',
- },
-
-]
-
interface Props {
children?: any,
isFull: boolean,
+ openModalAuthen: () => void,
+ openModalInfo: () => void,
}
-const HeaderMenu = memo(({ isFull }: Props) => {
+const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
+ const optionMenu = useMemo(() => [
+ {
+ onClick: openModalAuthen,
+ name: 'Login (Demo)',
+ },
+ {
+ onClick: openModalInfo,
+ name: 'Create User Info (Demo)',
+ },
+ {
+ link: ROUTE.ACCOUNT,
+ name: 'Account',
+ },
+ {
+ link: '/',
+ name: 'Logout',
+ },
+
+ ], [openModalAuthen])
+
return (
@@ -54,7 +64,7 @@ const HeaderMenu = memo(({ isFull }: Props) => {
-
+