mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into m5-datnguyen
This commit is contained in:
unknown
@@ -27,6 +27,8 @@
|
|||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"cookie": "^0.4.1",
|
"cookie": "^0.4.1",
|
||||||
"email-validator": "^2.0.4",
|
"email-validator": "^2.0.4",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-config-next": "^11.1.2",
|
||||||
"immutability-helper": "^3.1.1",
|
"immutability-helper": "^3.1.1",
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
"keen-slider": "^5.5.1",
|
"keen-slider": "^5.5.1",
|
||||||
@@ -66,6 +68,7 @@
|
|||||||
"@types/node": "^15.12.4",
|
"@types/node": "^15.12.4",
|
||||||
"@types/react": "^17.0.8",
|
"@types/react": "^17.0.8",
|
||||||
"deepmerge": "^4.2.2",
|
"deepmerge": "^4.2.2",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"graphql": "^15.5.1",
|
"graphql": "^15.5.1",
|
||||||
"husky": "^6.0.0",
|
"husky": "^6.0.0",
|
||||||
"lint-staged": "^11.0.0",
|
"lint-staged": "^11.0.0",
|
||||||
|
|||||||
17
pages/blog/[slug].tsx
Normal file
17
pages/blog/[slug].tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { Layout, RelevantBlogPosts } from 'src/components/common';
|
||||||
|
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
|
||||||
|
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
|
||||||
|
import { RECIPE_DATA_TEST } from 'src/utils/demo-data'
|
||||||
|
|
||||||
|
|
||||||
|
export default function BlogDetailPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<BlogDetailImg/>
|
||||||
|
<BlogContent/>
|
||||||
|
<RelevantBlogPosts data={RECIPE_DATA_TEST} title="You will like also" bgcolor="cream"/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
BlogDetailPage.Layout = Layout
|
||||||
@@ -19,4 +19,4 @@ export default function Home() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Home.Layout = Layout
|
Home.Layout = Layout
|
||||||
|
|||||||
15
pages/recipes.tsx
Normal file
15
pages/recipes.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { Layout } from 'src/components/common';
|
||||||
|
import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner';
|
||||||
|
import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
|
||||||
|
|
||||||
|
|
||||||
|
export default function RecipeListPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<RecipeListBanner />
|
||||||
|
<RecipesList/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
RecipeListPage.Layout = Layout
|
||||||
100
pages/test.tsx
100
pages/test.tsx
@@ -1,39 +1,81 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import {
|
import {
|
||||||
Layout,
|
Layout, RecipeDetail
|
||||||
} from 'src/components/common'
|
} from 'src/components/common';
|
||||||
import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
|
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
|
||||||
import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
|
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
|
||||||
import TabCommon from 'src/components/common/TabCommon/TabCommon'
|
// import { RecipeListPage } from 'src/components/modules/recipes';
|
||||||
import { CheckoutInfo } from 'src/components/modules/checkout'
|
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||||
import image7 from '../public/assets/images/image7.png'
|
|
||||||
import image8 from '../public/assets/images/image8.png'
|
|
||||||
|
|
||||||
|
const CATEGORY = [
|
||||||
|
{
|
||||||
|
name: 'All',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Veggie',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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`,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const BRAND = [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'Maggi',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cholimes',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chinsu',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const FEATURED = [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'Best Sellers',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sales',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'New Item',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Viewed',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
|
||||||
|
}
|
||||||
|
];
|
||||||
export default function Test() {
|
export default function Test() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{/* <BlogDetailPage /> */}
|
||||||
|
|
||||||
<TabCommon center={true}>
|
{/* <RecipeListPage/> */}
|
||||||
<TabPane
|
{/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
|
||||||
active={true}
|
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED}/>
|
||||||
tabName={'dat datdat datdatdatdatdatdat'}
|
|
||||||
>
|
|
||||||
<div className="w-full">
|
|
||||||
datdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdat
|
|
||||||
</div>
|
|
||||||
</TabPane>
|
|
||||||
<TabPane active={true} tabName={'1234567890'}>
|
|
||||||
<div className="w-full">
|
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit harum sint maiores optio? Perspiciatis, necessitatibus pariatur, ut sed aperiam minus reiciendis alias deleniti eligendi obcaecati illum id maxime accusantium beatae.
|
|
||||||
</div>
|
|
||||||
</TabPane>
|
|
||||||
<TabPane active={true} tabName={'1'}>
|
|
||||||
<div className="w-full">
|
|
||||||
11111111111111111111111111111111111111111111111111111111111
|
|
||||||
</div>
|
|
||||||
</TabPane>
|
|
||||||
</TabCommon>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(-0.707107 0.707107 0.707107 0.707107 40 8)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(-0.707107 0.707107 0.707107 0.707107 40 8)" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
<line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 797 B After Width: | Height: | Size: 785 B |
646
report.20210908.160959.14332.0.001.json
Normal file
646
report.20210908.160959.14332.0.001.json
Normal file
@@ -0,0 +1,646 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"header": {
|
||||||
|
"reportVersion": 1,
|
||||||
|
"event": "Allocation failed - JavaScript heap out of memory",
|
||||||
|
"trigger": "FatalError",
|
||||||
|
"filename": "report.20210908.160959.14332.0.001.json",
|
||||||
|
"dumpEventTime": "2021-09-08T16:09:59Z",
|
||||||
|
"dumpEventTimeStamp": "1631092199677",
|
||||||
|
"processId": 14332,
|
||||||
|
"cwd": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
|
||||||
|
"commandLine": [
|
||||||
|
"node",
|
||||||
|
"G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin\\\\..\\next\\dist\\bin\\next",
|
||||||
|
"dev"
|
||||||
|
],
|
||||||
|
"nodejsVersion": "v12.15.0",
|
||||||
|
"wordSize": 64,
|
||||||
|
"arch": "x64",
|
||||||
|
"platform": "win32",
|
||||||
|
"componentVersions": {
|
||||||
|
"node": "12.15.0",
|
||||||
|
"v8": "7.7.299.13-node.16",
|
||||||
|
"uv": "1.33.1",
|
||||||
|
"zlib": "1.2.11",
|
||||||
|
"brotli": "1.0.7",
|
||||||
|
"ares": "1.15.0",
|
||||||
|
"modules": "72",
|
||||||
|
"nghttp2": "1.40.0",
|
||||||
|
"napi": "5",
|
||||||
|
"llhttp": "2.0.4",
|
||||||
|
"http_parser": "2.9.3",
|
||||||
|
"openssl": "1.1.1d",
|
||||||
|
"cldr": "35.1",
|
||||||
|
"icu": "64.2",
|
||||||
|
"tz": "2019c",
|
||||||
|
"unicode": "12.1"
|
||||||
|
},
|
||||||
|
"release": {
|
||||||
|
"name": "node",
|
||||||
|
"lts": "Erbium",
|
||||||
|
"headersUrl": "https://nodejs.org/download/release/v12.15.0/node-v12.15.0-headers.tar.gz",
|
||||||
|
"sourceUrl": "https://nodejs.org/download/release/v12.15.0/node-v12.15.0.tar.gz",
|
||||||
|
"libUrl": "https://nodejs.org/download/release/v12.15.0/win-x64/node.lib"
|
||||||
|
},
|
||||||
|
"osName": "Windows_NT",
|
||||||
|
"osRelease": "10.0.19043",
|
||||||
|
"osVersion": "Windows 10 Pro",
|
||||||
|
"osMachine": "x86_64",
|
||||||
|
"cpus": [
|
||||||
|
{
|
||||||
|
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||||
|
"speed": 2395,
|
||||||
|
"user": 67605265,
|
||||||
|
"nice": 0,
|
||||||
|
"sys": 33647953,
|
||||||
|
"idle": 255172281,
|
||||||
|
"irq": 3598359
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||||
|
"speed": 2395,
|
||||||
|
"user": 68803843,
|
||||||
|
"nice": 0,
|
||||||
|
"sys": 25225015,
|
||||||
|
"idle": 262396453,
|
||||||
|
"irq": 602640
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||||
|
"speed": 2395,
|
||||||
|
"user": 76698718,
|
||||||
|
"nice": 0,
|
||||||
|
"sys": 25995390,
|
||||||
|
"idle": 253731187,
|
||||||
|
"irq": 321484
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||||
|
"speed": 2395,
|
||||||
|
"user": 77662531,
|
||||||
|
"nice": 0,
|
||||||
|
"sys": 24450312,
|
||||||
|
"idle": 254312468,
|
||||||
|
"irq": 266531
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"networkInterfaces": [
|
||||||
|
{
|
||||||
|
"name": "Wi-Fi",
|
||||||
|
"internal": false,
|
||||||
|
"mac": "a4:17:31:1d:cc:e5",
|
||||||
|
"address": "2402:800:6318:9d24:f937:34a5:8214:a074",
|
||||||
|
"netmask": "ffff:ffff:ffff:ffff::",
|
||||||
|
"family": "IPv6",
|
||||||
|
"scopeid": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Wi-Fi",
|
||||||
|
"internal": false,
|
||||||
|
"mac": "a4:17:31:1d:cc:e5",
|
||||||
|
"address": "2402:800:6318:9d24:69cf:fc3d:74:1b08",
|
||||||
|
"netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
|
||||||
|
"family": "IPv6",
|
||||||
|
"scopeid": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Wi-Fi",
|
||||||
|
"internal": false,
|
||||||
|
"mac": "a4:17:31:1d:cc:e5",
|
||||||
|
"address": "fe80::f937:34a5:8214:a074",
|
||||||
|
"netmask": "ffff:ffff:ffff:ffff::",
|
||||||
|
"family": "IPv6",
|
||||||
|
"scopeid": 21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Wi-Fi",
|
||||||
|
"internal": false,
|
||||||
|
"mac": "a4:17:31:1d:cc:e5",
|
||||||
|
"address": "192.168.1.10",
|
||||||
|
"netmask": "255.255.255.0",
|
||||||
|
"family": "IPv4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Loopback Pseudo-Interface 1",
|
||||||
|
"internal": true,
|
||||||
|
"mac": "00:00:00:00:00:00",
|
||||||
|
"address": "::1",
|
||||||
|
"netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
|
||||||
|
"family": "IPv6",
|
||||||
|
"scopeid": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Loopback Pseudo-Interface 1",
|
||||||
|
"internal": true,
|
||||||
|
"mac": "00:00:00:00:00:00",
|
||||||
|
"address": "127.0.0.1",
|
||||||
|
"netmask": "255.0.0.0",
|
||||||
|
"family": "IPv4"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"host": "DESKTOP-TILU55O"
|
||||||
|
},
|
||||||
|
"javascriptStack": {
|
||||||
|
"message": "No stack.",
|
||||||
|
"stack": [
|
||||||
|
"Unavailable."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"nativeStack": [
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77aa01759",
|
||||||
|
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77aa05b7c",
|
||||||
|
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77aa04b38",
|
||||||
|
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77aaf446b",
|
||||||
|
"symbol": "v8::base::CPU::has_sse+37723"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b2f8d9e",
|
||||||
|
"symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b2e0de1",
|
||||||
|
"symbol": "v8::SharedArrayBuffer::Externalize+833"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1ae6ac",
|
||||||
|
"symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1b9a50",
|
||||||
|
"symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1b6584",
|
||||||
|
"symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1abe13",
|
||||||
|
"symbol": "v8::internal::Heap::CollectGarbage+1283"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1aa5e4",
|
||||||
|
"symbol": "v8::internal::Heap::AddRetainedMap+2356"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1c46ee",
|
||||||
|
"symbol": "v8::internal::Factory::AllocateRawFixedArray+94"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1cba84",
|
||||||
|
"symbol": "v8::internal::Factory::NewFixedArrayWithFiller+52"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b1cba41",
|
||||||
|
"symbol": "v8::internal::Factory::NewUninitializedFixedArray+65"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b0ac86f",
|
||||||
|
"symbol": "v8::Object::GetIsolate+6767"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77af5feaa",
|
||||||
|
"symbol": "v8::internal::OrderedHashMap::ValueAt+61274"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x00007ff77b724d3d",
|
||||||
|
"symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pc": "0x0000004163e2d61e",
|
||||||
|
"symbol": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"javascriptHeap": {
|
||||||
|
"totalMemory": 2197684224,
|
||||||
|
"totalCommittedMemory": 2197684224,
|
||||||
|
"usedMemory": 2099361840,
|
||||||
|
"availableMemory": 89682992,
|
||||||
|
"memoryLimit": 2197815296,
|
||||||
|
"heapSpaces": {
|
||||||
|
"read_only_space": {
|
||||||
|
"memorySize": 262144,
|
||||||
|
"committedMemory": 262144,
|
||||||
|
"capacity": 261872,
|
||||||
|
"used": 32296,
|
||||||
|
"available": 229576
|
||||||
|
},
|
||||||
|
"new_space": {
|
||||||
|
"memorySize": 33554432,
|
||||||
|
"committedMemory": 33554432,
|
||||||
|
"capacity": 16759808,
|
||||||
|
"used": 9024016,
|
||||||
|
"available": 7735792
|
||||||
|
},
|
||||||
|
"old_space": {
|
||||||
|
"memorySize": 1753329664,
|
||||||
|
"committedMemory": 1753329664,
|
||||||
|
"capacity": 1750360832,
|
||||||
|
"used": 1685534088,
|
||||||
|
"available": 64826744
|
||||||
|
},
|
||||||
|
"code_space": {
|
||||||
|
"memorySize": 5144576,
|
||||||
|
"committedMemory": 5144576,
|
||||||
|
"capacity": 4347712,
|
||||||
|
"used": 4347712,
|
||||||
|
"available": 0
|
||||||
|
},
|
||||||
|
"map_space": {
|
||||||
|
"memorySize": 8916992,
|
||||||
|
"committedMemory": 8916992,
|
||||||
|
"capacity": 4381920,
|
||||||
|
"used": 4381920,
|
||||||
|
"available": 0
|
||||||
|
},
|
||||||
|
"large_object_space": {
|
||||||
|
"memorySize": 395280384,
|
||||||
|
"committedMemory": 395280384,
|
||||||
|
"capacity": 394944560,
|
||||||
|
"used": 394944560,
|
||||||
|
"available": 0
|
||||||
|
},
|
||||||
|
"code_large_object_space": {
|
||||||
|
"memorySize": 1196032,
|
||||||
|
"committedMemory": 1196032,
|
||||||
|
"capacity": 1097248,
|
||||||
|
"used": 1097248,
|
||||||
|
"available": 0
|
||||||
|
},
|
||||||
|
"new_large_object_space": {
|
||||||
|
"memorySize": 0,
|
||||||
|
"committedMemory": 0,
|
||||||
|
"capacity": 16759808,
|
||||||
|
"used": 0,
|
||||||
|
"available": 16759808
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"resourceUsage": {
|
||||||
|
"userCpuSeconds": 2420.01,
|
||||||
|
"kernelCpuSeconds": 114.859,
|
||||||
|
"cpuConsumptionPercent": 11.0361,
|
||||||
|
"maxRss": 2818129920,
|
||||||
|
"pageFaults": {
|
||||||
|
"IORequired": 14395451,
|
||||||
|
"IONotRequired": 0
|
||||||
|
},
|
||||||
|
"fsActivity": {
|
||||||
|
"reads": 46029,
|
||||||
|
"writes": 640054
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"libuv": [
|
||||||
|
],
|
||||||
|
"environmentVariables": {
|
||||||
|
"=G:": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
|
||||||
|
"ALLUSERSPROFILE": "C:\\ProgramData",
|
||||||
|
"ANDROID_HOME": "G:\\ASDK",
|
||||||
|
"ANDROID_SDK_ROOT": "G:\\ASDK",
|
||||||
|
"APPDATA": "C:\\Users\\nhan\\AppData\\Roaming",
|
||||||
|
"ChocolateyInstall": "C:\\ProgramData\\chocolatey",
|
||||||
|
"ChocolateyLastPathUpdate": "132608575831335062",
|
||||||
|
"CHROME_CRASHPAD_PIPE_NAME": "\\\\.\\pipe\\crashpad_17244_MSJZWZVAYBLFIPJS",
|
||||||
|
"CLASSPATH": "C:\\Program Files\\Java\\jdk1.8.0_231\\bin",
|
||||||
|
"COLORTERM": "truecolor",
|
||||||
|
"COMMERCE_CUSTOMERAUTH_ENABLED": "true",
|
||||||
|
"COMMERCE_PROVIDER": "vendure",
|
||||||
|
"CommonProgramFiles": "C:\\Program Files\\Common Files",
|
||||||
|
"CommonProgramFiles(x86)": "C:\\Program Files (x86)\\Common Files",
|
||||||
|
"CommonProgramW6432": "C:\\Program Files\\Common Files",
|
||||||
|
"COMPUTERNAME": "DESKTOP-TILU55O",
|
||||||
|
"ComSpec": "C:\\WINDOWS\\system32\\cmd.exe",
|
||||||
|
"dp0": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin\\",
|
||||||
|
"DriverData": "C:\\Windows\\System32\\Drivers\\DriverData",
|
||||||
|
"FPS_BROWSER_APP_PROFILE_STRING": "Internet Explorer",
|
||||||
|
"FPS_BROWSER_USER_PROFILE_STRING": "Default",
|
||||||
|
"GIT_ASKPASS": "c:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh",
|
||||||
|
"GIT_LFS_PATH": "C:\\Program Files\\Git LFS",
|
||||||
|
"HOME": "C:\\Users\\nhan",
|
||||||
|
"HOMEDRIVE": "C:",
|
||||||
|
"HOMEPATH": "\\Users\\nhan",
|
||||||
|
"INIT_CWD": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
|
||||||
|
"JAVA_HOME": "C:\\Program Files\\Java\\jdk1.8.0_281",
|
||||||
|
"LANG": "en_US.UTF-8",
|
||||||
|
"LOCALAPPDATA": "C:\\Users\\nhan\\AppData\\Local",
|
||||||
|
"LOGONSERVER": "\\\\DESKTOP-TILU55O",
|
||||||
|
"NEXT_PUBLIC_VENDURE_LOCAL_URL": "/vendure-shop-api",
|
||||||
|
"NEXT_PUBLIC_VENDURE_SHOP_API_URL": "https://demo.vendure.io/shop-api",
|
||||||
|
"NODE": "C:\\Program Files\\nodejs\\node.exe",
|
||||||
|
"NODE_ENV": "development",
|
||||||
|
"NODE_EXE": "C:\\Program Files\\nodejs\\\\node.exe",
|
||||||
|
"NODE_OPTIONS": "'--inspect' ",
|
||||||
|
"NPM_CLI_JS": "C:\\Program Files\\nodejs\\\\node_modules\\npm\\bin\\npm-cli.js",
|
||||||
|
"npm_config_access": "",
|
||||||
|
"npm_config_allow_same_version": "",
|
||||||
|
"npm_config_also": "",
|
||||||
|
"npm_config_always_auth": "",
|
||||||
|
"npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"dev-windows\"],\"original\":[\"run\",\"dev-windows\"]}",
|
||||||
|
"npm_config_audit": "true",
|
||||||
|
"npm_config_audit_level": "low",
|
||||||
|
"npm_config_auth_type": "legacy",
|
||||||
|
"npm_config_before": "",
|
||||||
|
"npm_config_bin_links": "true",
|
||||||
|
"npm_config_browser": "",
|
||||||
|
"npm_config_ca": "",
|
||||||
|
"npm_config_cache": "C:\\Users\\nhan\\AppData\\Roaming\\npm-cache",
|
||||||
|
"npm_config_cache_lock_retries": "10",
|
||||||
|
"npm_config_cache_lock_stale": "60000",
|
||||||
|
"npm_config_cache_lock_wait": "10000",
|
||||||
|
"npm_config_cache_max": "Infinity",
|
||||||
|
"npm_config_cache_min": "10",
|
||||||
|
"npm_config_cafile": "",
|
||||||
|
"npm_config_cert": "",
|
||||||
|
"npm_config_cidr": "",
|
||||||
|
"npm_config_color": "true",
|
||||||
|
"npm_config_commit_hooks": "true",
|
||||||
|
"npm_config_depth": "Infinity",
|
||||||
|
"npm_config_description": "true",
|
||||||
|
"npm_config_dev": "",
|
||||||
|
"npm_config_dry_run": "",
|
||||||
|
"npm_config_editor": "notepad.exe",
|
||||||
|
"npm_config_engine_strict": "",
|
||||||
|
"npm_config_fetch_retries": "2",
|
||||||
|
"npm_config_fetch_retry_factor": "10",
|
||||||
|
"npm_config_fetch_retry_maxtimeout": "60000",
|
||||||
|
"npm_config_fetch_retry_mintimeout": "10000",
|
||||||
|
"npm_config_force": "",
|
||||||
|
"npm_config_format_package_lock": "true",
|
||||||
|
"npm_config_fund": "true",
|
||||||
|
"npm_config_git": "git",
|
||||||
|
"npm_config_git_tag_version": "true",
|
||||||
|
"npm_config_global": "",
|
||||||
|
"npm_config_globalconfig": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmrc",
|
||||||
|
"npm_config_globalignorefile": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmignore",
|
||||||
|
"npm_config_global_style": "",
|
||||||
|
"npm_config_group": "",
|
||||||
|
"npm_config_ham_it_up": "",
|
||||||
|
"npm_config_heading": "npm",
|
||||||
|
"npm_config_https_proxy": "",
|
||||||
|
"npm_config_if_present": "",
|
||||||
|
"npm_config_ignore_prepublish": "",
|
||||||
|
"npm_config_ignore_scripts": "",
|
||||||
|
"npm_config_init_author_email": "",
|
||||||
|
"npm_config_init_author_name": "",
|
||||||
|
"npm_config_init_author_url": "",
|
||||||
|
"npm_config_init_license": "ISC",
|
||||||
|
"npm_config_init_module": "C:\\Users\\nhan\\.npm-init.js",
|
||||||
|
"npm_config_init_version": "1.0.0",
|
||||||
|
"npm_config_json": "",
|
||||||
|
"npm_config_key": "",
|
||||||
|
"npm_config_legacy_bundling": "",
|
||||||
|
"npm_config_link": "",
|
||||||
|
"npm_config_local_address": "",
|
||||||
|
"npm_config_loglevel": "notice",
|
||||||
|
"npm_config_logs_max": "10",
|
||||||
|
"npm_config_long": "",
|
||||||
|
"npm_config_maxsockets": "50",
|
||||||
|
"npm_config_message": "%s",
|
||||||
|
"npm_config_metrics_registry": "https://registry.npmjs.org/",
|
||||||
|
"npm_config_node_gyp": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js",
|
||||||
|
"npm_config_node_options": "",
|
||||||
|
"npm_config_node_version": "12.15.0",
|
||||||
|
"npm_config_noproxy": "",
|
||||||
|
"npm_config_offline": "",
|
||||||
|
"npm_config_onload_script": "",
|
||||||
|
"npm_config_only": "",
|
||||||
|
"npm_config_optional": "true",
|
||||||
|
"npm_config_otp": "",
|
||||||
|
"npm_config_package_lock": "true",
|
||||||
|
"npm_config_package_lock_only": "",
|
||||||
|
"npm_config_parseable": "",
|
||||||
|
"npm_config_prefer_offline": "",
|
||||||
|
"npm_config_prefer_online": "",
|
||||||
|
"npm_config_prefix": "C:\\Users\\nhan\\AppData\\Roaming\\npm",
|
||||||
|
"npm_config_preid": "",
|
||||||
|
"npm_config_production": "",
|
||||||
|
"npm_config_progress": "true",
|
||||||
|
"npm_config_proxy": "",
|
||||||
|
"npm_config_read_only": "",
|
||||||
|
"npm_config_rebuild_bundle": "true",
|
||||||
|
"npm_config_registry": "https://registry.npmjs.org/",
|
||||||
|
"npm_config_rollback": "true",
|
||||||
|
"npm_config_save": "true",
|
||||||
|
"npm_config_save_bundle": "",
|
||||||
|
"npm_config_save_dev": "",
|
||||||
|
"npm_config_save_exact": "",
|
||||||
|
"npm_config_save_optional": "",
|
||||||
|
"npm_config_save_prefix": "^",
|
||||||
|
"npm_config_save_prod": "",
|
||||||
|
"npm_config_scope": "",
|
||||||
|
"npm_config_scripts_prepend_node_path": "warn-only",
|
||||||
|
"npm_config_script_shell": "",
|
||||||
|
"npm_config_searchexclude": "",
|
||||||
|
"npm_config_searchlimit": "20",
|
||||||
|
"npm_config_searchopts": "",
|
||||||
|
"npm_config_searchstaleness": "900",
|
||||||
|
"npm_config_send_metrics": "",
|
||||||
|
"npm_config_shell": "C:\\WINDOWS\\system32\\cmd.exe",
|
||||||
|
"npm_config_shrinkwrap": "true",
|
||||||
|
"npm_config_sign_git_commit": "",
|
||||||
|
"npm_config_sign_git_tag": "",
|
||||||
|
"npm_config_sso_poll_frequency": "500",
|
||||||
|
"npm_config_sso_type": "oauth",
|
||||||
|
"npm_config_strict_ssl": "true",
|
||||||
|
"npm_config_tag": "latest",
|
||||||
|
"npm_config_tag_version_prefix": "v",
|
||||||
|
"npm_config_timing": "",
|
||||||
|
"npm_config_tmp": "C:\\Users\\nhan\\AppData\\Local\\Temp",
|
||||||
|
"npm_config_umask": "0000",
|
||||||
|
"npm_config_unicode": "",
|
||||||
|
"npm_config_unsafe_perm": "true",
|
||||||
|
"npm_config_update_notifier": "true",
|
||||||
|
"npm_config_usage": "",
|
||||||
|
"npm_config_user": "",
|
||||||
|
"npm_config_userconfig": "C:\\Users\\nhan\\.npmrc",
|
||||||
|
"npm_config_user_agent": "npm/6.13.4 node/v12.15.0 win32 x64",
|
||||||
|
"npm_config_version": "",
|
||||||
|
"npm_config_versions": "",
|
||||||
|
"npm_config_viewer": "browser",
|
||||||
|
"npm_execpath": "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js",
|
||||||
|
"npm_lifecycle_event": "dev-windows",
|
||||||
|
"npm_lifecycle_script": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
|
||||||
|
"npm_node_execpath": "C:\\Program Files\\nodejs\\node.exe",
|
||||||
|
"npm_package_dependencies_autoprefixer": "^10.2.6",
|
||||||
|
"npm_package_dependencies_body_scroll_lock": "^3.1.5",
|
||||||
|
"npm_package_dependencies_classnames": "^2.3.1",
|
||||||
|
"npm_package_dependencies_cookie": "^0.4.1",
|
||||||
|
"npm_package_dependencies_email_validator": "^2.0.4",
|
||||||
|
"npm_package_dependencies_eslint": "^7.32.0",
|
||||||
|
"npm_package_dependencies_eslint_config_next": "^11.1.2",
|
||||||
|
"npm_package_dependencies_immutability_helper": "^3.1.1",
|
||||||
|
"npm_package_dependencies_js_cookie": "^2.2.1",
|
||||||
|
"npm_package_dependencies_keen_slider": "^5.5.1",
|
||||||
|
"npm_package_dependencies_lodash_debounce": "^4.0.8",
|
||||||
|
"npm_package_dependencies_lodash_random": "^3.2.0",
|
||||||
|
"npm_package_dependencies_lodash_throttle": "^4.1.1",
|
||||||
|
"npm_package_dependencies_next": "^11.0.0",
|
||||||
|
"npm_package_dependencies_next_seo": "^4.26.0",
|
||||||
|
"npm_package_dependencies_next_themes": "^0.0.14",
|
||||||
|
"npm_package_dependencies_postcss": "^8.3.5",
|
||||||
|
"npm_package_dependencies_postcss_nesting": "^8.0.1",
|
||||||
|
"npm_package_dependencies_react": "^17.0.2",
|
||||||
|
"npm_package_dependencies_react_dom": "^17.0.2",
|
||||||
|
"npm_package_dependencies_react_fast_marquee": "^1.1.4",
|
||||||
|
"npm_package_dependencies_react_merge_refs": "^1.1.0",
|
||||||
|
"npm_package_dependencies_react_player": "^2.9.0",
|
||||||
|
"npm_package_dependencies_react_use_measure": "^2.0.4",
|
||||||
|
"npm_package_dependencies_sass": "^1.38.0",
|
||||||
|
"npm_package_dependencies_swell_js": "^4.0.0-next.0",
|
||||||
|
"npm_package_dependencies_swr": "^0.5.6",
|
||||||
|
"npm_package_dependencies_tabbable": "^5.2.0",
|
||||||
|
"npm_package_dependencies_tailwindcss": "^2.2.2",
|
||||||
|
"npm_package_dependencies_uuidv4": "^6.2.10",
|
||||||
|
"npm_package_dependencies__react_spring_web": "^9.2.1",
|
||||||
|
"npm_package_dependencies__vercel_fetch": "^6.1.0",
|
||||||
|
"npm_package_description": "[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)",
|
||||||
|
"npm_package_devDependencies_deepmerge": "^4.2.2",
|
||||||
|
"npm_package_devDependencies_eslint_config_prettier": "^8.3.0",
|
||||||
|
"npm_package_devDependencies_graphql": "^15.5.1",
|
||||||
|
"npm_package_devDependencies_husky": "^6.0.0",
|
||||||
|
"npm_package_devDependencies_lint_staged": "^11.0.0",
|
||||||
|
"npm_package_devDependencies_postcss_flexbugs_fixes": "^5.0.2",
|
||||||
|
"npm_package_devDependencies_postcss_import": "^14.0.2",
|
||||||
|
"npm_package_devDependencies_postcss_preset_env": "^6.7.0",
|
||||||
|
"npm_package_devDependencies_prettier": "^2.3.0",
|
||||||
|
"npm_package_devDependencies_typescript": "4.3.4",
|
||||||
|
"npm_package_devDependencies__graphql_codegen_cli": "^1.21.5",
|
||||||
|
"npm_package_devDependencies__graphql_codegen_schema_ast": "^1.18.3",
|
||||||
|
"npm_package_devDependencies__graphql_codegen_typescript": "^1.22.2",
|
||||||
|
"npm_package_devDependencies__graphql_codegen_typescript_operations": "^1.18.1",
|
||||||
|
"npm_package_devDependencies__next_bundle_analyzer": "^10.2.3",
|
||||||
|
"npm_package_devDependencies__types_body_scroll_lock": "^2.6.1",
|
||||||
|
"npm_package_devDependencies__types_cookie": "^0.4.0",
|
||||||
|
"npm_package_devDependencies__types_js_cookie": "^2.2.6",
|
||||||
|
"npm_package_devDependencies__types_lodash_debounce": "^4.0.6",
|
||||||
|
"npm_package_devDependencies__types_lodash_random": "^3.2.6",
|
||||||
|
"npm_package_devDependencies__types_lodash_throttle": "^4.1.6",
|
||||||
|
"npm_package_devDependencies__types_node": "^15.12.4",
|
||||||
|
"npm_package_devDependencies__types_react": "^17.0.8",
|
||||||
|
"npm_package_engines_node": ">=14.x",
|
||||||
|
"npm_package_gitHead": "16ca52162bc58204b405a3732a141f014a9573e2",
|
||||||
|
"npm_package_license": "MIT",
|
||||||
|
"npm_package_lint_staged_______js_jsx_ts_tsx__0": "prettier --write",
|
||||||
|
"npm_package_lint_staged_______js_jsx_ts_tsx__1": "git add",
|
||||||
|
"npm_package_lint_staged_______md_mdx_json__0": "prettier --write",
|
||||||
|
"npm_package_lint_staged_______md_mdx_json__1": "git add",
|
||||||
|
"npm_package_name": "nextjs-commerce",
|
||||||
|
"npm_package_next_unused_alias__assets___0": "assets/*",
|
||||||
|
"npm_package_next_unused_alias__components___0": "components/*",
|
||||||
|
"npm_package_next_unused_alias__config___0": "config/*",
|
||||||
|
"npm_package_next_unused_alias__lib___0": "lib/*",
|
||||||
|
"npm_package_next_unused_alias__utils___0": "utils/*",
|
||||||
|
"npm_package_next_unused_debug": "true",
|
||||||
|
"npm_package_next_unused_entrypoints_0": "pages",
|
||||||
|
"npm_package_next_unused_include_0": "components",
|
||||||
|
"npm_package_next_unused_include_1": "lib",
|
||||||
|
"npm_package_next_unused_include_2": "pages",
|
||||||
|
"npm_package_readmeFilename": "README.md",
|
||||||
|
"npm_package_scripts_analyze": "BUNDLE_ANALYZE=both yarn build",
|
||||||
|
"npm_package_scripts_build": "next build",
|
||||||
|
"npm_package_scripts_dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
|
||||||
|
"npm_package_scripts_dev_windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
|
||||||
|
"npm_package_scripts_find_unused": "npx next-unused",
|
||||||
|
"npm_package_scripts_generate": "graphql-codegen",
|
||||||
|
"npm_package_scripts_generate_definitions": "node framework/bigcommerce/scripts/generate-definitions.js",
|
||||||
|
"npm_package_scripts_generate_shopify": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config framework/shopify/codegen.json",
|
||||||
|
"npm_package_scripts_generate_vendure": "graphql-codegen --config framework/vendure/codegen.json",
|
||||||
|
"npm_package_scripts_prettier_fix": "prettier --write .",
|
||||||
|
"npm_package_scripts_start": "next start",
|
||||||
|
"npm_package_sideEffects": "false",
|
||||||
|
"npm_package_version": "1.0.0",
|
||||||
|
"NPM_PREFIX_NPM_CLI_JS": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js",
|
||||||
|
"NUMBER_OF_PROCESSORS": "4",
|
||||||
|
"OneDrive": "C:\\Users\\nhan\\OneDrive",
|
||||||
|
"OneDriveConsumer": "C:\\Users\\nhan\\OneDrive",
|
||||||
|
"OPENSSL_CONF": "C:\\Program Files\\PostgreSQL\\psqlODBC\\etc\\openssl.cnf",
|
||||||
|
"ORIGINAL_XDG_CURRENT_DESKTOP": "undefined",
|
||||||
|
"OS": "Windows_NT",
|
||||||
|
"Path": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\npm-lifecycle\\node-gyp-bin;G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\WINDOWS\\System32\\OpenSSH\\;C:\\Program Files\\Java\\jdk1.8.0_231\\bin;C:\\Program Files\\nodejs\\;C:\\Program Files\\MySQL\\MySQL Server 8.0\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files\\MongoDB\\Server\\4.2\\bin;;C:\\Program Files\\Git LFS;D:\\hoc-fpt\\code-tren-lop\\php\\xampp3\\php;C:\\ProgramData\\ComposerSetup\\bin;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\AdoptOpenJDK\\jdk8u192-b12\\bin;C:\\Program Files\\Java\\jdk1.8.0_211\\bin;C:\\Android\\android-sdk\\tools;C:\\Android\\android-sdk\\platform-tools;C:\\Android\\android-sdk\\tools\\bin;C:\\Program Files\\MySQL\\MySQL Shell 8.0\\bin\\;C:\\Program Files\\Java\\jdk1.8.0_231\\bin;C:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\bin;C:\\Users\\nhan\\AppData\\Roaming\\npm;C:\\Program Files\\MySQL\\MySQL Server 8.0\\bin;C:\\Program Files\\heroku\\bin;C:\\Users\\nhan\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\nhan\\AppData\\Roaming\\Composer\\vendor\\bin",
|
||||||
|
"PATHEXT": ".COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JSE;.WSF;.WSH;.MSC;.CPL",
|
||||||
|
"PORT": "3005 ",
|
||||||
|
"PROCESSOR_ARCHITECTURE": "AMD64",
|
||||||
|
"PROCESSOR_IDENTIFIER": "Intel64 Family 6 Model 58 Stepping 9, GenuineIntel",
|
||||||
|
"PROCESSOR_LEVEL": "6",
|
||||||
|
"PROCESSOR_REVISION": "3a09",
|
||||||
|
"ProgramData": "C:\\ProgramData",
|
||||||
|
"ProgramFiles": "C:\\Program Files",
|
||||||
|
"ProgramFiles(x86)": "C:\\Program Files (x86)",
|
||||||
|
"ProgramW6432": "C:\\Program Files",
|
||||||
|
"PROMPT": "$P$G",
|
||||||
|
"PSModulePath": "C:\\Users\\nhan\\Documents\\WindowsPowerShell\\Modules;C:\\Program Files\\WindowsPowerShell\\Modules;C:\\WINDOWS\\system32\\WindowsPowerShell\\v1.0\\Modules",
|
||||||
|
"PUBLIC": "C:\\Users\\Public",
|
||||||
|
"SESSIONNAME": "Console",
|
||||||
|
"SystemDrive": "C:",
|
||||||
|
"SystemRoot": "C:\\WINDOWS",
|
||||||
|
"TEMP": "C:\\Users\\nhan\\AppData\\Local\\Temp",
|
||||||
|
"TERM_PROGRAM": "vscode",
|
||||||
|
"TERM_PROGRAM_VERSION": "1.60.0",
|
||||||
|
"TMP": "C:\\Users\\nhan\\AppData\\Local\\Temp",
|
||||||
|
"TRACE_ID": "69c5adcb5945384d",
|
||||||
|
"USERDOMAIN": "DESKTOP-TILU55O",
|
||||||
|
"USERDOMAIN_ROAMINGPROFILE": "DESKTOP-TILU55O",
|
||||||
|
"USERNAME": "nhan",
|
||||||
|
"USERPROFILE": "C:\\Users\\nhan",
|
||||||
|
"VSCODE_GIT_ASKPASS_MAIN": "c:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js",
|
||||||
|
"VSCODE_GIT_ASKPASS_NODE": "C:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe",
|
||||||
|
"VSCODE_GIT_IPC_HANDLE": "\\\\.\\pipe\\vscode-git-d5d8071aa9-sock",
|
||||||
|
"windir": "C:\\WINDOWS",
|
||||||
|
"_prog": "node",
|
||||||
|
"__NEXT_PROCESSED_ENV": "true"
|
||||||
|
},
|
||||||
|
"sharedObjects": [
|
||||||
|
"C:\\Program Files\\nodejs\\node.exe",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\ntdll.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\KERNEL32.DLL",
|
||||||
|
"C:\\WINDOWS\\System32\\KERNELBASE.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\WS2_32.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\RPCRT4.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\ADVAPI32.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\msvcrt.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\sechost.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\USER32.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\win32u.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\GDI32.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\gdi32full.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\msvcp_win.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\ucrtbase.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\PSAPI.DLL",
|
||||||
|
"C:\\WINDOWS\\System32\\CRYPT32.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\bcrypt.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\dbghelp.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\IPHLPAPI.DLL",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\USERENV.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\WINMM.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\IMM32.DLL",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\powrprof.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\UMPDC.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\CRYPTBASE.DLL",
|
||||||
|
"C:\\WINDOWS\\system32\\uxtheme.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\combase.dll",
|
||||||
|
"C:\\WINDOWS\\system32\\mswsock.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\kernel.appcore.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\bcryptprimitives.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\NSI.dll",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\dhcpcsvc6.DLL",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\dhcpcsvc.DLL",
|
||||||
|
"C:\\WINDOWS\\SYSTEM32\\DNSAPI.dll",
|
||||||
|
"C:\\WINDOWS\\system32\\napinsp.dll",
|
||||||
|
"C:\\WINDOWS\\system32\\pnrpnsp.dll",
|
||||||
|
"C:\\WINDOWS\\system32\\wshbth.dll",
|
||||||
|
"C:\\WINDOWS\\system32\\NLAapi.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\winrnr.dll",
|
||||||
|
"C:\\Windows\\System32\\rasadhlp.dll",
|
||||||
|
"C:\\WINDOWS\\System32\\fwpuclnt.dll"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@import '../../../styles/utilities';
|
||||||
.authorWarper{
|
.authorWarper{
|
||||||
@apply flex flex-row items-center;
|
@apply flex flex-row items-center;
|
||||||
|
|
||||||
|
|||||||
@@ -2,9 +2,8 @@ import React from 'react';
|
|||||||
import s from './Author.module.scss';
|
import s from './Author.module.scss';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import Image from "next/image";
|
|
||||||
interface Props {
|
interface Props {
|
||||||
image:any,
|
image:string,
|
||||||
name: string
|
name: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -12,7 +11,7 @@ const Author = ({image,name}:Props) =>{
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(s.authorWarper)}>
|
<div className={classNames(s.authorWarper)}>
|
||||||
<Image className={classNames(s.authorImage)} src={image} alt=""/>
|
<img className={classNames(s.authorImage)} src={image} alt=""/>
|
||||||
<div className={classNames(s.authorName)}>{name}</div>
|
<div className={classNames(s.authorName)}>{name}</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,29 +1,29 @@
|
|||||||
@import "../../../styles/utilities";
|
@import "../../../styles/utilities";
|
||||||
|
|
||||||
.cardBlogWarpper{
|
.cardBlogWarpper {
|
||||||
|
@apply inline-flex flex-col justify-start;
|
||||||
max-width: 39.2rem;
|
max-width: 39.2rem;
|
||||||
min-height: 34.4rem;
|
min-height: 34.4rem;
|
||||||
@apply inline-flex flex-col justify-start;
|
.image {
|
||||||
.image{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 22rem;
|
max-height: 22rem;
|
||||||
border-radius: 2.4rem;
|
border-radius: 2.4rem;
|
||||||
&:hover{
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title{
|
.title {
|
||||||
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
|
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
|
||||||
@apply font-bold;
|
@apply font-bold;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
line-height: 2.8rem;
|
line-height: 2.8rem;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
color: var(--text-active);
|
color: var(--text-active);
|
||||||
&:hover{
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.description{
|
.description {
|
||||||
padding: 0 0.8rem;
|
padding: 0 0.8rem;
|
||||||
@apply overflow-hidden overflow-ellipsis ;
|
@apply overflow-hidden overflow-ellipsis ;
|
||||||
color: var(--text-label);
|
color: var(--text-label);
|
||||||
|
|||||||
@@ -1,21 +1,27 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { RecipeProps } from 'src/utils/types.utils'
|
import { ROUTE } from 'src/utils/constanst.utils'
|
||||||
|
import { BlogProps } from 'src/utils/types.utils'
|
||||||
import s from './CardBlog.module.scss'
|
import s from './CardBlog.module.scss'
|
||||||
export interface BlogCardProps extends RecipeProps {
|
export interface BlogCardProps extends BlogProps {
|
||||||
link: string,
|
// todo: edit when intergrate API
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => {
|
const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={s.cardBlogWarpper}>
|
<div className={s.cardBlogWarpper}>
|
||||||
<Link href={link}>
|
<Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
|
||||||
<div className={s.image}>
|
<a>
|
||||||
<img src={imageSrc} alt="image cardblog" />
|
<div className={s.image}>
|
||||||
</div>
|
<img src={imageSrc} alt="image cardblog" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={link}>
|
<Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
|
||||||
<div className={s.title}>{title}</div>
|
<a>
|
||||||
|
<div className={s.title}>{title}</div>
|
||||||
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<div className={s.description}>{description}</div>
|
<div className={s.description}>{description}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,18 +1,19 @@
|
|||||||
@import "../../../styles/utilities";
|
@import "../../../../styles/utilities";
|
||||||
|
|
||||||
.collapseWrapper{
|
.collapseWrapper {
|
||||||
@apply border-t border-b;
|
@apply border-t border-b;
|
||||||
border-color: var(--border-line);
|
border-color: var(--border-line);
|
||||||
max-width: 80.4rem;
|
max-width: 80.4rem;
|
||||||
min-height: 4rem;
|
min-height: 4rem;
|
||||||
&.isActive{
|
&.isActive {
|
||||||
.title{
|
.title {
|
||||||
@apply pb-0;
|
@apply pb-0;
|
||||||
}
|
}
|
||||||
.contentContainer{
|
.contentContainer {
|
||||||
@apply block;
|
@apply block;
|
||||||
|
animation: ContentAnimationIn 0.5s ease-out;
|
||||||
}
|
}
|
||||||
.toggle{
|
.toggle {
|
||||||
&:before {
|
&:before {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
@@ -21,21 +22,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
svg:hover{
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title{
|
.title {
|
||||||
@apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
|
@apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
|
||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
.toggle{
|
.toggle {
|
||||||
height: 2.2rem;
|
height: 2.2rem;
|
||||||
width: 2.2rem;
|
width: 2.2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:before,
|
&:before,
|
||||||
&:after{
|
&:after {
|
||||||
@apply absolute h-2;
|
@apply absolute h-2;
|
||||||
content: "";
|
content: "";
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
@@ -44,12 +45,22 @@
|
|||||||
width: 2.2rem;
|
width: 2.2rem;
|
||||||
transition: transform 500ms ease;
|
transition: transform 500ms ease;
|
||||||
}
|
}
|
||||||
&:before{
|
&:before {
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.contentContainer{
|
.contentContainer {
|
||||||
@apply hidden pb-16;
|
@apply hidden pb-16;
|
||||||
}
|
}
|
||||||
|
@keyframes ContentAnimationIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-1.6rem);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import s from './CollapseChild.module.scss'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import CollapseContent from './CollapseContent/CollapseContent'
|
||||||
|
|
||||||
|
interface CollapseProps{
|
||||||
|
title?: string,
|
||||||
|
content: Array<string>,
|
||||||
|
isToggle?: boolean,
|
||||||
|
}
|
||||||
|
const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
|
||||||
|
const [isActive, changeActive] = useState(isToggle)
|
||||||
|
|
||||||
|
const handleToggle = () => {
|
||||||
|
changeActive(!isActive)
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<div className={classNames({
|
||||||
|
[s.collapseWrapper] : true,
|
||||||
|
[s.isActive] : isActive
|
||||||
|
})}
|
||||||
|
onClick = { handleToggle }
|
||||||
|
>
|
||||||
|
<div className={s.title}>
|
||||||
|
<h4>{title}</h4>
|
||||||
|
<div className={s.toggle}></div>
|
||||||
|
</div>
|
||||||
|
<div className={s.contentContainer}>
|
||||||
|
{
|
||||||
|
content.map(item => <CollapseContent key={item} content={item} />)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CollapseChild
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
.content{
|
.content {
|
||||||
margin-top: 1.6rem;
|
margin-top: 1.6rem;
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
import classNames from 'classnames'
|
|
||||||
import s from './CollapseContent.module.scss'
|
import s from './CollapseContent.module.scss'
|
||||||
|
|
||||||
interface CollapseContentProps{
|
interface CollapseContentProps{
|
||||||
@@ -1,37 +1,19 @@
|
|||||||
import s from './CollapseCommon.module.scss'
|
import CollapseChild from './CollapseChild/CollapseChild'
|
||||||
import { useState } from 'react'
|
|
||||||
import classNames from 'classnames'
|
|
||||||
import CollapseContent from './CollapseContent/CollapseContent'
|
|
||||||
|
|
||||||
interface CollapseProps{
|
interface CollapseCommonProps{
|
||||||
title?: string,
|
data: {title: string, content: Array<string>}[],
|
||||||
content: Array<string>,
|
|
||||||
isToggle?: boolean,
|
|
||||||
}
|
}
|
||||||
const CollapseCommon = ({title, content, isToggle}: CollapseProps) => {
|
|
||||||
const [isActive, changeActive] = useState(isToggle)
|
|
||||||
|
|
||||||
const handleToggle = () => {
|
const CollapseCommon = ({data}: CollapseCommonProps) => {
|
||||||
changeActive(!isActive)
|
return (
|
||||||
}
|
<section>
|
||||||
return(
|
{
|
||||||
<div className={classNames({
|
data.map(item =>
|
||||||
[s.collapseWrapper] : true,
|
<CollapseChild key={item.title} title={item.title} content={item.content}/>
|
||||||
[s.isActive] : isActive
|
)
|
||||||
})}
|
}
|
||||||
onClick = { handleToggle }
|
</section>
|
||||||
>
|
|
||||||
<div className={s.title}>
|
|
||||||
<a>{title}</a>
|
|
||||||
<div className={s.toggle}></div>
|
|
||||||
</div>
|
|
||||||
<div className={s.contentContainer}>
|
|
||||||
{
|
|
||||||
content.map(item => <CollapseContent content={item} />)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default CollapseCommon
|
export default CollapseCommon
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
@screen md {
|
@screen md {
|
||||||
max-width: 55rem;
|
max-width: 52rem;
|
||||||
}
|
}
|
||||||
.top {
|
.top {
|
||||||
@apply flex justify-between items-center;
|
@apply flex justify-between items-center;
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
@apply hidden;
|
@apply hidden;
|
||||||
@screen md {
|
@screen md {
|
||||||
@apply flex items-center list-none;
|
@apply flex items-center list-none;
|
||||||
li {
|
> li {
|
||||||
@apply flex justify-center items-center w-full;
|
@apply flex justify-center items-center w-full;
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 4.8rem;
|
margin-right: 4.8rem;
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
a {
|
a {
|
||||||
@appy no-underline;
|
@appy no-underline;
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: .8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
&.iconFavourite {
|
&.iconFavourite {
|
||||||
svg path {
|
svg path {
|
||||||
@@ -61,7 +61,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.btnCart {
|
||||||
|
&:hover {
|
||||||
|
svg path {
|
||||||
|
fill: var(--primary);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
|
|||||||
<MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
|
<MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button>
|
<button className={s.btnCart}>
|
||||||
<IconBuy />
|
<IconBuy />
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const Layout: FC<Props> = ({ children }) => {
|
|||||||
return (
|
return (
|
||||||
<CommerceProvider locale={locale}>
|
<CommerceProvider locale={locale}>
|
||||||
<div className={s.mainLayout}>
|
<div className={s.mainLayout}>
|
||||||
{/* <Header /> */}
|
<Header />
|
||||||
<main >{children}</main>
|
<main >{children}</main>
|
||||||
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
|
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
|
||||||
<CartDrawer
|
<CartDrawer
|
||||||
|
|||||||
@@ -3,9 +3,6 @@
|
|||||||
.menuDropdown {
|
.menuDropdown {
|
||||||
@apply relative cursor-pointer;
|
@apply relative cursor-pointer;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
.label {
|
|
||||||
all: unset;
|
|
||||||
}
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.label {
|
.label {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
@@ -20,10 +17,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
all: unset;
|
||||||
@apply flex justify-end items-center transition-all duration-200;
|
@apply flex justify-end items-center transition-all duration-200;
|
||||||
svg path {
|
svg path {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: var(--primary);
|
||||||
|
svg path {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid #000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.arrow {
|
&.arrow {
|
||||||
@@ -66,18 +74,9 @@
|
|||||||
@apply rounded list-none bg-white;
|
@apply rounded list-none bg-white;
|
||||||
border: 1px solid var(--text-active);
|
border: 1px solid var(--text-active);
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
li {
|
> li {
|
||||||
@apply block w-full transition-all duration-200 cursor-pointer text-active;
|
@apply block w-full transition-all duration-200 cursor-pointer text-active;
|
||||||
word-wrap: break-word;
|
|
||||||
-webkit-hyphens: auto;
|
|
||||||
-ms-hyphens: auto;
|
|
||||||
-moz-hyphens: auto;
|
|
||||||
hyphens: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: relative;
|
|
||||||
max-width: 15rem;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
|
||||||
button {
|
button {
|
||||||
all: unset;
|
all: unset;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
|
|||||||
40
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
40
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
@import "../../../styles/utilities";
|
||||||
|
.menuFilterWrapper{
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
.menuFilterHeading{
|
||||||
|
@apply sub-headline font-bold ;
|
||||||
|
color: var(--text-active);
|
||||||
|
font-feature-settings: 'salt' on;
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
}
|
||||||
|
.menuFilterList{
|
||||||
|
@apply flex flex-wrap justify-start relative;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&::after{
|
||||||
|
@apply absolute;
|
||||||
|
top: 110%;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid var(--border-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding:0;
|
||||||
|
div{
|
||||||
|
padding: 0.8rem 1.6rem;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
background-color: var(--gray);
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
&.active {
|
||||||
|
color:white;
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
48
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
48
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import classNames from 'classnames'
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import s from './MenuFilter.module.scss'
|
||||||
|
interface Props {
|
||||||
|
children?: any,
|
||||||
|
heading?:string,
|
||||||
|
categories:{name:string,link:string}[],
|
||||||
|
type:string,
|
||||||
|
onChangeValue?: (value: Object) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
|
||||||
|
const [active, setActive] = useState<string>('');
|
||||||
|
|
||||||
|
function handleClick(link:string){
|
||||||
|
setActive(link);
|
||||||
|
|
||||||
|
if(active === link){
|
||||||
|
setActive('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
|
||||||
|
let href = active?.split("=");
|
||||||
|
const linkValue = href[1];
|
||||||
|
|
||||||
|
onChangeValue && onChangeValue({[type]:linkValue});
|
||||||
|
},[active])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={s.menuFilterWrapper}>
|
||||||
|
<h2 className={s.menuFilterHeading}>{heading}</h2>
|
||||||
|
<ul className={s.menuFilterList}>
|
||||||
|
{
|
||||||
|
categories.map(item => <li key={item.name}>
|
||||||
|
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
</li>)
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MenuFilter
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
@import "../../../styles/utilities";
|
||||||
|
.menuNavigationWrapper{
|
||||||
|
.menuNavigationHeading{
|
||||||
|
@screen md {
|
||||||
|
@apply sub-headline font-bold ;
|
||||||
|
color: var(--text-active);
|
||||||
|
font-feature-settings: 'salt' on;
|
||||||
|
margin: 1.6rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuNavigationList{
|
||||||
|
@screen md {
|
||||||
|
li{
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
a{
|
||||||
|
display:block;
|
||||||
|
width:100%;
|
||||||
|
color:var(--text-base);
|
||||||
|
&:hover {
|
||||||
|
@apply text-primary;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
@apply text-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
34
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import classNames from 'classnames'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import s from './MenuNavigation.module.scss'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children?: any,
|
||||||
|
heading:string,
|
||||||
|
categories:{name:string,link:string}[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuNavigation = ({heading,categories}:Props)=> {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={s.menuNavigationWrapper}>
|
||||||
|
<h2 className={s.menuNavigationHeading}>{heading}({categories.length})</h2>
|
||||||
|
<ul className={s.menuNavigationList}>
|
||||||
|
{
|
||||||
|
categories.map(item => <li key={item.name}
|
||||||
|
>
|
||||||
|
<Link href={item.link}>
|
||||||
|
<a className={classNames({ [s.active]: router.asPath === item.link})}>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</li>)
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MenuNavigation
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
@import "../../../styles/utilities";
|
||||||
|
.menuNavigationProductListDesktop{
|
||||||
|
@screen sm-only {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuNavigationProductListMobile{
|
||||||
|
@apply hidden;
|
||||||
|
&.isShow{
|
||||||
|
@apply block;
|
||||||
|
@screen md {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuNavigationProductModal{
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
.content{
|
||||||
|
@apply spacing-horizontal;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding-top: 2rem ;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
background-color: white;
|
||||||
|
overflow: auto;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 2.4rem 2.4rem 0 0;
|
||||||
|
.head{
|
||||||
|
@apply flex justify-between;
|
||||||
|
h3{
|
||||||
|
@apply heading-3 font-bold;
|
||||||
|
color:var(--text-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
margin-top: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {ButtonCommon} from 'src/components/common';
|
||||||
|
import s from './MenuNavigationProductList.module.scss';
|
||||||
|
import MenuSort from './MenuSort/MenuSort';
|
||||||
|
import {LANGUAGE} from 'src/utils/language.utils';
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import MenuFilter from '../MenuFilter/MenuFilter';
|
||||||
|
import MenuNavigation from '../MenuNavigation/MenuNavigation';
|
||||||
|
import IconHide from 'src/components/icons/IconHide';
|
||||||
|
|
||||||
|
interface Props{
|
||||||
|
categories:{name:string,link:string}[],
|
||||||
|
brands:{name:string,link:string}[],
|
||||||
|
featured:{name:string,link:string}[],
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
|
||||||
|
|
||||||
|
const [dataSort,setDataSort] = useState({});
|
||||||
|
const [isShow,setIsShow] = useState(true);
|
||||||
|
|
||||||
|
function handleValue(value:Object){
|
||||||
|
setDataSort({...dataSort,...value});
|
||||||
|
}
|
||||||
|
function filter(){
|
||||||
|
console.log(dataSort)
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMenu(){
|
||||||
|
if(isShow === true){
|
||||||
|
setIsShow(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<div className={s.menuNavigationProductListDesktop}>
|
||||||
|
<MenuNavigation categories={categories} heading="Categories"/>
|
||||||
|
<MenuNavigation categories={brands} heading="Brands"/>
|
||||||
|
<MenuNavigation categories={featured} heading="Featured"/>
|
||||||
|
</div>
|
||||||
|
<div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
|
||||||
|
<div className={s.menuNavigationProductModal}>
|
||||||
|
<div className={s.content}>
|
||||||
|
<div className={s.head}>
|
||||||
|
<h3>FILTER</h3>
|
||||||
|
<div onClick={hideMenu}><IconHide/></div>
|
||||||
|
</div>
|
||||||
|
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
|
||||||
|
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
|
||||||
|
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
|
||||||
|
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
|
||||||
|
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MenuNavigationProductList
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
@import "../../../../styles/utilities";
|
||||||
|
.menuSortWrapper{
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
.menuSortHeading{
|
||||||
|
@apply sub-headline font-bold ;
|
||||||
|
color: var(--text-active);
|
||||||
|
font-feature-settings: 'salt' on;
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
}
|
||||||
|
.menuSortList{
|
||||||
|
box-sizing: border-box;
|
||||||
|
&::after{
|
||||||
|
@apply absolute;
|
||||||
|
top: 110%;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid var(--border-line);
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
div{
|
||||||
|
height: 4.8rem;
|
||||||
|
line-height: 4.8rem;
|
||||||
|
padding: 0 1.6rem;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
&.active {
|
||||||
|
@apply font-bold relative;
|
||||||
|
color:var(--text-active);
|
||||||
|
background-color: var(--primary-lightest);
|
||||||
|
&::after{
|
||||||
|
@apply absolute;
|
||||||
|
content:"";
|
||||||
|
background-image: url('/assets/svg/check.svg');
|
||||||
|
right: 1.6rem;
|
||||||
|
top: calc(50% - 24px/2);
|
||||||
|
width: 2.4rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import classNames from 'classnames';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||||
|
import s from './MenuSort.module.scss';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children?: any,
|
||||||
|
heading:string,
|
||||||
|
type:string,
|
||||||
|
onChangeValue?: (value: Object) => void
|
||||||
|
}
|
||||||
|
const SORT = [
|
||||||
|
{
|
||||||
|
name: 'By Name',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Price(High to Low)',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Price (Low to High)',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'On Sale',
|
||||||
|
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const MenuSort = ({heading,type,onChangeValue}:Props)=> {
|
||||||
|
const [active, setActive] = useState<string>('');
|
||||||
|
|
||||||
|
function handleClick(link:string){
|
||||||
|
setActive(link);
|
||||||
|
|
||||||
|
if(active === link){
|
||||||
|
setActive('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
|
||||||
|
let href = active?.split("=");
|
||||||
|
const linkValue = href[1];
|
||||||
|
|
||||||
|
onChangeValue && onChangeValue({[type]:linkValue});
|
||||||
|
},[active])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={classNames(s.menuSortWrapper)}>
|
||||||
|
<h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
|
||||||
|
<ul className={s.menuSortList}>
|
||||||
|
{
|
||||||
|
SORT.map(item => <li key={item.name}>
|
||||||
|
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
</li>)
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MenuSort
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React, { useEffect, useRef } from 'react'
|
import React, { useEffect, useRef } from 'react'
|
||||||
import { ButtonCommon, Inputcommon } from 'src/components/common'
|
import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
|
||||||
import InputPassword from 'src/components/common/InputPassword/InputPassword'
|
|
||||||
import { ROUTE } from 'src/utils/constanst.utils'
|
import { ROUTE } from 'src/utils/constanst.utils'
|
||||||
import { CustomInputCommon } from 'src/utils/type.utils'
|
import { CustomInputCommon } from 'src/utils/type.utils'
|
||||||
import s from '../FormAuthen.module.scss'
|
import s from '../FormAuthen.module.scss'
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useRef } from 'react'
|
import React, { useEffect, useRef } from 'react'
|
||||||
import { ButtonCommon, Inputcommon } from 'src/components/common'
|
import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
|
||||||
import s from '../FormAuthen.module.scss'
|
import s from '../FormAuthen.module.scss'
|
||||||
import styles from './FormRegister.module.scss'
|
import styles from './FormRegister.module.scss'
|
||||||
import SocialAuthen from '../SocialAuthen/SocialAuthen'
|
import SocialAuthen from '../SocialAuthen/SocialAuthen'
|
||||||
|
|||||||
@@ -1,18 +1,19 @@
|
|||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
|
import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
|
||||||
|
import { DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils'
|
||||||
import PaginationItem from './components/PaginationItem'
|
import PaginationItem from './components/PaginationItem'
|
||||||
import s from './PaginationCommon.module.scss'
|
import s from './PaginationCommon.module.scss'
|
||||||
interface PaginationCommonProps {
|
interface PaginationCommonProps {
|
||||||
defaultCurrent?: number
|
defaultCurrent?: number
|
||||||
pageSize: number
|
pageSize?: number
|
||||||
total: number
|
total: number
|
||||||
onChange?: (page: number, pageSize: number) => void
|
onChange?: (page: number, pageSize: number) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const PaginationCommon = ({
|
const PaginationCommon = ({
|
||||||
total,
|
total,
|
||||||
pageSize,
|
pageSize=DEFAULT_PAGE_SIZE,
|
||||||
defaultCurrent,
|
defaultCurrent,
|
||||||
onChange,
|
onChange,
|
||||||
}: PaginationCommonProps) => {
|
}: PaginationCommonProps) => {
|
||||||
@@ -54,14 +55,14 @@ const PaginationCommon = ({
|
|||||||
<PaginationItem
|
<PaginationItem
|
||||||
page={index}
|
page={index}
|
||||||
onClick={onPageClick}
|
onClick={onPageClick}
|
||||||
key={`${index}-item`}
|
key={index}
|
||||||
active={index === currentPage}
|
active={index === currentPage}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
<div
|
<div
|
||||||
className={classNames(s.item, {
|
className={classNames(s.item, {
|
||||||
[`${s.disable}`]: currentPage >= pageNum - 1,
|
[s.disable]: currentPage >= pageNum - 1,
|
||||||
})}
|
})}
|
||||||
onClick={onNextClick}
|
onClick={onNextClick}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
@import '../../../styles/utilities';
|
@import '../../../styles/utilities';
|
||||||
|
|
||||||
.blogPostWarpper {
|
.blogPostWarpper {
|
||||||
|
&.cream{
|
||||||
|
background-color: #F5F4F2;
|
||||||
|
}
|
||||||
padding-top: 5.6rem;
|
padding-top: 5.6rem;
|
||||||
padding-bottom: 5.2rem;
|
padding-bottom: 5.2rem;
|
||||||
@apply flex flex-col;
|
@apply flex flex-col;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import image15 from '../../../../public/assets/images/image15.png'
|
import image15 from '../../../../public/assets/images/image15.png'
|
||||||
import image16 from '../../../../public/assets/images/image16.png'
|
import image16 from '../../../../public/assets/images/image16.png'
|
||||||
import image17 from '../../../../public/assets/images/image17.png'
|
import image17 from '../../../../public/assets/images/image17.png'
|
||||||
|
import classNames from 'classnames'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { HeadingCommon, ViewAllItem } from 'src/components/common'
|
import { HeadingCommon, ViewAllItem } from 'src/components/common'
|
||||||
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
|
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
|
||||||
@@ -9,54 +10,59 @@ import s from './RelevantBlogPosts.module.scss'
|
|||||||
import { ROUTE } from 'src/utils/constanst.utils';
|
import { ROUTE } from 'src/utils/constanst.utils';
|
||||||
|
|
||||||
interface RelevantProps {
|
interface RelevantProps {
|
||||||
data?: BlogCardProps[]
|
data?: BlogCardProps[],
|
||||||
itemKey?: string
|
itemKey?: string,
|
||||||
title?: string
|
title?: string,
|
||||||
viewAllLink?: string
|
viewAllLink?: string,
|
||||||
|
bgcolor?: "default" | "cream"
|
||||||
}
|
}
|
||||||
|
|
||||||
const recipe:BlogCardProps[] = [
|
const recipe:BlogCardProps[] = [
|
||||||
{
|
{
|
||||||
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
||||||
imageSrc: image15.src,
|
imageSrc: image15.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
},{
|
},{
|
||||||
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||||
imageSrc: image16.src,
|
imageSrc: image16.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
},{
|
},{
|
||||||
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||||
imageSrc: image17.src,
|
imageSrc: image17.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
},{
|
},{
|
||||||
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
||||||
imageSrc: image15.src,
|
imageSrc: image15.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
},{
|
},{
|
||||||
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||||
imageSrc: image16.src,
|
imageSrc: image16.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
},{
|
},{
|
||||||
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
||||||
|
slug: 'have-a-nice-lunch',
|
||||||
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||||
imageSrc: image17.src,
|
imageSrc: image17.src,
|
||||||
link: `${ROUTE.BLOG_DETAIL}`
|
|
||||||
}]
|
}]
|
||||||
|
|
||||||
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts" }: RelevantProps) => {
|
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={s.blogPostWarpper}>
|
<div className={classNames({
|
||||||
|
[s.blogPostWarpper] : true,
|
||||||
|
[s[bgcolor]] : bgcolor,
|
||||||
|
})}
|
||||||
|
>
|
||||||
<div className={s.top}>
|
<div className={s.top}>
|
||||||
<div className={s.left}>
|
<div className={s.left}>
|
||||||
<HeadingCommon>{title}</HeadingCommon>
|
<HeadingCommon>{title}</HeadingCommon>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.right}>
|
<div className={s.right}>
|
||||||
<ViewAllItem link="#"/>
|
<ViewAllItem link={ROUTE.BLOGS}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.bot}>
|
<div className={s.bot}>
|
||||||
|
|||||||
@@ -1,69 +1,90 @@
|
|||||||
@import "../../../styles/utilities";
|
@import "../../../styles/utilities";
|
||||||
|
|
||||||
.select{
|
.select {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
&.base{
|
.selectTrigger {
|
||||||
|
svg {
|
||||||
|
@apply transition-all duration-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.base {
|
||||||
width: 20.6rem;
|
width: 20.6rem;
|
||||||
.selectTrigger{
|
.selectTrigger {
|
||||||
width: 20.6rem;
|
width: 20.6rem;
|
||||||
padding: 1.2rem 1.6rem;
|
padding: 1.2rem 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.large{
|
&.large {
|
||||||
width: 34.25rem;
|
width: 34.25rem;
|
||||||
.selectTrigger{
|
.selectTrigger {
|
||||||
width: 34.25rem;
|
width: 34.25rem;
|
||||||
padding: 1.6rem 1.6rem;
|
padding: 1.6rem 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.default{
|
&.default {
|
||||||
.selectTrigger{
|
.selectTrigger {
|
||||||
@apply border-solid border border-current;
|
@apply border-solid border border-current;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.custom{
|
&.custom {
|
||||||
.selectTrigger{
|
.selectTrigger {
|
||||||
@apply border-2;
|
@apply border-2;
|
||||||
border-color: var(--border-line);
|
border-color: var(--border-line);
|
||||||
color: var(--text-label);
|
color: var(--text-label);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.isActive{
|
&:hover {
|
||||||
.selectOptionWrapper{
|
cursor: pointer;
|
||||||
|
.hoverWrapper {
|
||||||
@apply block;
|
@apply block;
|
||||||
|
animation: SelectAnimation 0.2s ease-out;
|
||||||
|
}
|
||||||
|
.selectTrigger {
|
||||||
|
svg {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.selectTrigger{
|
.selectTrigger {
|
||||||
@apply outline-none flex justify-between;
|
@apply outline-none flex justify-between;
|
||||||
color: var(--text-active);
|
color: var(--text-active);
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
.selectOptionWrapper{
|
.hoverWrapper {
|
||||||
@apply outline-none hidden z-10 absolute;
|
@apply hidden outline-none absolute z-10;
|
||||||
border-radius: 0.8rem;
|
padding-top: 0.6rem;
|
||||||
background-color: var(--white);
|
.selectOptionWrapper {
|
||||||
padding: 0.4rem 0rem 0.4rem 0rem;
|
border-radius: 0.8rem;
|
||||||
margin-top: 0.6rem;
|
background-color: var(--white);
|
||||||
&.base{
|
padding: 0.4rem 0rem 0.4rem 0rem;
|
||||||
width: 20.6rem;
|
&.base {
|
||||||
|
width: 20.6rem;
|
||||||
|
}
|
||||||
|
&.large {
|
||||||
|
width: 34.25rem;
|
||||||
|
}
|
||||||
|
&.default {
|
||||||
|
@apply border-solid border border-current;
|
||||||
|
}
|
||||||
|
&.custom {
|
||||||
|
@apply border-2;
|
||||||
|
border-color: var(--border-line);
|
||||||
|
color: var(--text-label);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.large{
|
&:hover {
|
||||||
width: 34.25rem;
|
@apply block;
|
||||||
}
|
|
||||||
&.default{
|
|
||||||
@apply border-solid border border-current;
|
|
||||||
}
|
|
||||||
&.custom{
|
|
||||||
@apply border-2;
|
|
||||||
border-color: var(--border-line);
|
|
||||||
color: var(--text-label);
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
@apply hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes SelectAnimation {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.6rem);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,43 +1,25 @@
|
|||||||
import s from './SelectCommon.module.scss'
|
import s from './SelectCommon.module.scss'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import { useState, useRef, useEffect } from 'react'
|
import { useState } from 'react'
|
||||||
import { IconVectorDown } from 'src/components/icons'
|
import { IconVectorDown } from 'src/components/icons'
|
||||||
import SelectOption from './SelectOption/SelectOption'
|
import SelectOption from './SelectOption/SelectOption'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children? : React.ReactNode,
|
placeholder? : string,
|
||||||
size?: 'base' | 'large',
|
size?: 'base' | 'large',
|
||||||
type?: 'default' | 'custom',
|
type?: 'default' | 'custom',
|
||||||
option: {name: string}[],
|
option: {name: string, value: string}[],
|
||||||
|
onChange?: (value: string) => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
|
const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
|
||||||
const [isActive, setActive] = useState(false)
|
const [selectedName, setSelectedName] = useState(placeholder)
|
||||||
const [selectedName, setSelectedName] = useState(children)
|
const [selectedValue, setSelectedValue] = useState('')
|
||||||
const ref = useRef<HTMLDivElement>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClick = (event: MouseEvent) => {
|
|
||||||
const { target } = event;
|
|
||||||
if (!ref?.current || ref?.current.contains(target as Node)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
setActive(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('click', handleClick)
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('click', handleClick)
|
|
||||||
}
|
|
||||||
}, [ref])
|
|
||||||
|
|
||||||
const changeActiveStatus = () => {
|
const changeSelectedName = (item:string, value: string) => {
|
||||||
setActive(!isActive)
|
setSelectedValue(value)
|
||||||
}
|
|
||||||
|
|
||||||
const changeSelectedName = (item:string) => {
|
|
||||||
setSelectedName(item)
|
setSelectedName(item)
|
||||||
|
onChange && onChange(value)
|
||||||
}
|
}
|
||||||
return(
|
return(
|
||||||
<>
|
<>
|
||||||
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
|
|||||||
[s.select] : true,
|
[s.select] : true,
|
||||||
[s[size]] : !!size,
|
[s[size]] : !!size,
|
||||||
[s[type]] : !!type,
|
[s[type]] : !!type,
|
||||||
[s.isActive] : isActive,
|
|
||||||
})}
|
})}
|
||||||
onClick = { changeActiveStatus }
|
|
||||||
ref = {ref}
|
|
||||||
>
|
>
|
||||||
<div className={classNames({
|
<div className={classNames({
|
||||||
[s.selectTrigger] : true,
|
[s.selectTrigger] : true,
|
||||||
|
|
||||||
})}
|
})}
|
||||||
>{selectedName}<IconVectorDown /></div>
|
>{selectedName}<IconVectorDown /></div>
|
||||||
|
|
||||||
<div className={classNames({
|
<div className={s.hoverWrapper}>
|
||||||
[s.selectOptionWrapper] : true,
|
<div className={classNames({
|
||||||
[s[type]] : !!type,
|
[s.selectOptionWrapper] : true,
|
||||||
[s[size]] : !!size,
|
[s[type]] : !!type,
|
||||||
})}
|
[s[size]] : !!size,
|
||||||
>
|
})}
|
||||||
{
|
>
|
||||||
option.map(item =>
|
{
|
||||||
<SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
|
option.map(item =>
|
||||||
)
|
<SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
|
||||||
}
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -13,5 +13,9 @@
|
|||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
&.isChoose{
|
||||||
|
background-color: var(--gray);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
|
|||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
|
|
||||||
interface Props{
|
interface Props{
|
||||||
onClick: (value: string) => void,
|
onClick: (name: string, value: string) => void,
|
||||||
itemName: string,
|
itemName: string,
|
||||||
size: 'base' | 'large',
|
size: 'base' | 'large',
|
||||||
|
value: string,
|
||||||
|
selected?: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
const SelectOption = ({onClick, itemName, size}: Props) => {
|
const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
|
||||||
|
|
||||||
const changeName = () => {
|
const changeName = () => {
|
||||||
onClick(itemName)
|
onClick(itemName, value)
|
||||||
}
|
}
|
||||||
return(
|
return(
|
||||||
<div className={classNames({
|
<div className={classNames({
|
||||||
[s.selectOption] : true,
|
[s.selectOption] : true,
|
||||||
[s[size]] : !!size,
|
[s[size]] : !!size,
|
||||||
|
[s.isChoose] : selected ,
|
||||||
})}
|
})}
|
||||||
onClick = {changeName}
|
onClick = {changeName}
|
||||||
>{itemName}</div>
|
>{itemName}</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ const ArrowUp = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<svg style={{margin:"auto", fontWeight: "bold"}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#141414" className="bi bi-chevron-up" viewBox="0 0 16 16">
|
<svg style={{margin:"auto", fontWeight: "bold"}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#141414" className="bi bi-chevron-up" viewBox="0 0 16 16">
|
||||||
<path stroke="#141414" stroke-width="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
|
<path stroke="#141414" strokeWidth="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
12
src/components/icons/IconHide.tsx
Normal file
12
src/components/icons/IconHide.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const IconHide = () => {
|
||||||
|
return (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 6L6 18" stroke="#2F2F2F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
<path d="M6 6L18 18" stroke="#2F2F2F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IconHide
|
||||||
@@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
const IconVectorDown = ({ ...props }) => {
|
const IconVectorDown = ({ ...props }) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
@import "../../../../styles/_utilities";
|
||||||
|
|
||||||
|
.blogContentWrapper{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 2rem;
|
||||||
|
@screen md {
|
||||||
|
width: 90%;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
@screen xl{
|
||||||
|
width: 63%;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
@apply heading-2;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
@apply heading-3;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
@apply heading-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,h2,h3,h4{
|
||||||
|
color:var(--text-base);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.author{
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.boxShare{
|
||||||
|
@apply flex font-bold;
|
||||||
|
margin: 4rem 0;
|
||||||
|
color: var(--text-active);
|
||||||
|
.listIcon{
|
||||||
|
ul{
|
||||||
|
@apply flex;
|
||||||
|
li{
|
||||||
|
margin: 0px 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Author, DateTime } from "src/components/common";
|
||||||
|
import IconFacebook from 'src/components/icons/IconFacebook';
|
||||||
|
import IconInstagram from 'src/components/icons/IconInstagram';
|
||||||
|
import IconTwitter from 'src/components/icons/IconTwitter';
|
||||||
|
import s from './BlogContent.module.scss';
|
||||||
|
import imageAuthor from '../../../common/Author/img/author.png';
|
||||||
|
import Link from 'next/link';
|
||||||
|
interface BlogContentProps {
|
||||||
|
className?: string
|
||||||
|
children?: any,
|
||||||
|
}
|
||||||
|
const BlogContent = ({}:BlogContentProps) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={s.blogContentWrapper}>
|
||||||
|
<DateTime date="APRIL 30, 2021"/>
|
||||||
|
<h1>The Best Sesame Soy Broccoli Salad</h1>
|
||||||
|
<div className={s.author}>
|
||||||
|
<Author image={imageAuthor.src} name="Alessandro Del Piero" />
|
||||||
|
</div>
|
||||||
|
<section className={s.content}>
|
||||||
|
|
||||||
|
<p> When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<h2 className={s.heading2}>What is broccoli salad</h2>
|
||||||
|
<br/>
|
||||||
|
<p> When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<h2 className={s.heading2}>What about broccoli stems?</h2>
|
||||||
|
<br/>
|
||||||
|
<p>
|
||||||
|
You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
|
||||||
|
</p>
|
||||||
|
<br/>
|
||||||
|
<img src="https://i.pinimg.com/236x/f0/bd/a6/f0bda6a9ed04a6c4ac9453be80c95f75.jpg" alt="blog-detail" />
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className={s.boxShare}>
|
||||||
|
<div className={s.share}>
|
||||||
|
Share to:
|
||||||
|
</div>
|
||||||
|
<div className={s.listIcon}>
|
||||||
|
<ul>
|
||||||
|
<li><Link href="/"><a> <IconFacebook/></a></Link></li>
|
||||||
|
<li><Link href="/"><a> <IconTwitter/></a></Link></li>
|
||||||
|
<li><Link href="/"><a> <IconInstagram/></a></Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BlogContent
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
.beadcrumb{
|
||||||
|
padding-left: 3.2rem;
|
||||||
|
padding-bottom: 3.2rem;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 2.4rem;
|
||||||
|
@screen md {
|
||||||
|
width: 90%;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
@screen xl{
|
||||||
|
width: 63%;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
|
||||||
|
import s from './BlogDetailImg.module.scss';
|
||||||
|
interface Props {
|
||||||
|
className?: string
|
||||||
|
children?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const CRUMBS =[
|
||||||
|
{
|
||||||
|
name:"Blog",
|
||||||
|
link:"/blog"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const BlogDetailImg = ({}:Props ) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={s.beadcrumb}>
|
||||||
|
<BreadcrumbCommon crumbs={CRUMBS} />
|
||||||
|
</div>
|
||||||
|
<img className={s.image} src="https://i.pinimg.com/564x/3d/42/94/3d429429428377070c4f91844a8d8755.jpg" alt="Ảnh đại diện" />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BlogDetailImg
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 709 KiB |
2
src/components/modules/blog-detail/index.ts
Normal file
2
src/components/modules/blog-detail/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as BlogContent } from './BlogContent/BlogContent';
|
||||||
|
export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg';
|
||||||
@@ -11,11 +11,19 @@
|
|||||||
@apply grid;
|
@apply grid;
|
||||||
grid-template-columns: 1fr 1.8fr;
|
grid-template-columns: 1fr 1.8fr;
|
||||||
.left {
|
.left {
|
||||||
@apply flex items-end justify-center custom-border-radius-lg;
|
@apply relative flex items-end justify-center custom-border-radius-lg;
|
||||||
margin-right: 1.6rem;
|
margin-right: 1.6rem;
|
||||||
background-image: url('./assets/home_banner.png');
|
.imgWrap {
|
||||||
background-repeat: no-repeat;
|
@apply absolute w-full h-full;
|
||||||
background-size: cover;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
> div {
|
||||||
|
@apply w-full h-full custom-border-radius-lg;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
@apply relative font-heading text-center;
|
@apply relative font-heading text-center;
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Banner } from 'src/components/common'
|
import { Banner } from 'src/components/common'
|
||||||
import s from './HomeBanner.module.scss'
|
|
||||||
import BannerImgRight from './assets/banner_full.png'
|
import BannerImgRight from './assets/banner_full.png'
|
||||||
import BannerImgRight2 from './assets/banner_product.png'
|
import HomeBannerImg from './assets/home_banner.png'
|
||||||
|
import s from './HomeBanner.module.scss'
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@@ -13,6 +14,9 @@ const HomeBanner = ({ }: Props) => {
|
|||||||
return (
|
return (
|
||||||
<div className={s.homeBanner}>
|
<div className={s.homeBanner}>
|
||||||
<section className={s.left}>
|
<section className={s.left}>
|
||||||
|
<div className={s.imgWrap}>
|
||||||
|
<Image src={HomeBannerImg} placeholder='blur' />
|
||||||
|
</div>
|
||||||
<div className={s.text}>
|
<div className={s.text}>
|
||||||
Freshness<br />guaranteed
|
Freshness<br />guaranteed
|
||||||
</div>
|
</div>
|
||||||
@@ -28,10 +32,10 @@ const HomeBanner = ({ }: Props) => {
|
|||||||
{
|
{
|
||||||
title: "Save 15% on your first order 2",
|
title: "Save 15% on your first order 2",
|
||||||
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
|
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
|
||||||
imgLink: BannerImgRight2.src,
|
imgLink: BannerImgRight.src,
|
||||||
size: "small",
|
size: "small",
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div >
|
</div >
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
@@ -1,19 +1,19 @@
|
|||||||
<svg width="240" height="268" viewBox="0 0 240 268" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="240" height="268" viewBox="0 0 240 268" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<rect x="170.045" y="167.357" width="32.2656" height="16.5938" rx="4" transform="rotate(-16 170.045 167.357)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="170.045" y="167.357" width="32.2656" height="16.5938" rx="4" transform="rotate(-16 170.045 167.357)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<path d="M170.168 201.23C167.732 192.736 172.644 183.875 181.138 181.439L199.117 176.284C207.611 173.848 216.471 178.76 218.907 187.254L234.907 243.052C236.125 247.299 233.669 251.73 229.422 252.948L196.063 262.513C191.816 263.731 187.386 261.275 186.168 257.028L170.168 201.23Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M170.168 201.23C167.732 192.736 172.644 183.875 181.138 181.439L199.117 176.284C207.611 173.848 216.471 178.76 218.907 187.254L234.907 243.052C236.125 247.299 233.669 251.73 229.422 252.948L196.063 262.513C191.816 263.731 187.386 261.275 186.168 257.028L170.168 201.23Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="177.519" y="170.009" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 177.519 170.009)" fill="#CDF4DD"/>
|
<rect x="177.519" y="170.009" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 177.519 170.009)" fill="#CDF4DD"/>
|
||||||
<rect x="185.494" y="167.723" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 185.494 167.723)" fill="#CDF4DD"/>
|
<rect x="185.494" y="167.723" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 185.494 167.723)" fill="#CDF4DD"/>
|
||||||
<rect x="193.47" y="165.436" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 193.47 165.436)" fill="#CDF4DD"/>
|
<rect x="193.47" y="165.436" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 193.47 165.436)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<path d="M36.5973 106.436L39.9701 94.6735L64.4373 101.689L60.9881 113.718C59.4878 118.951 60.973 124.584 64.8578 128.397C69.0553 132.516 70.4233 138.726 68.3451 144.228L55.6959 177.716C54.5922 180.638 51.4315 182.224 48.4292 181.363L11.314 170.721C8.31623 169.861 6.47675 166.848 7.08188 163.789L13.7174 130.242C14.9118 124.203 19.3948 119.345 25.3188 117.671C30.7696 116.131 35.036 111.881 36.5973 106.436Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M36.5973 106.436L39.9701 94.6735L64.4373 101.689L60.9881 113.718C59.4878 118.951 60.973 124.584 64.8578 128.397C69.0553 132.516 70.4233 138.726 68.3451 144.228L55.6959 177.716C54.5922 180.638 51.4315 182.224 48.4292 181.363L11.314 170.721C8.31623 169.861 6.47675 166.848 7.08188 163.789L13.7174 130.242C14.9118 124.203 19.3948 119.345 25.3188 117.671C30.7696 116.131 35.036 111.881 36.5973 106.436Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="42.3359" y="74.5464" width="32" height="19" rx="6" transform="rotate(16 42.3359 74.5464)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="42.3359" y="74.5464" width="32" height="19" rx="6" transform="rotate(16 42.3359 74.5464)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="70.6162" y="92.0181" width="4" height="32" rx="2" transform="rotate(106 70.6162 92.0181)" fill="#CDF4DD"/>
|
<rect x="70.6162" y="92.0181" width="4" height="32" rx="2" transform="rotate(106 70.6162 92.0181)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<path d="M186.052 83.4148L179.934 94.0117L157.891 81.2851L164.148 70.448C166.869 65.7341 166.791 59.9085 163.944 55.2694C160.868 50.2567 161.043 43.9002 164.39 39.0645L184.765 9.63163C186.543 7.06354 189.994 6.28885 192.699 7.85054L226.137 27.156C228.837 28.7153 229.893 32.0836 228.566 34.9057L214.012 65.8511C211.392 71.4217 205.867 75.0504 199.714 75.2416C194.052 75.4176 188.885 78.5093 186.052 83.4148Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M186.052 83.4148L179.934 94.0117L157.891 81.2851L164.148 70.448C166.869 65.7341 166.791 59.9085 163.944 55.2694C160.868 50.2567 161.043 43.9002 164.39 39.0645L184.765 9.63163C186.543 7.06354 189.994 6.28885 192.699 7.85054L226.137 27.156C228.837 28.7153 229.893 32.0836 228.566 34.9057L214.012 65.8511C211.392 71.4217 205.867 75.0504 199.714 75.2416C194.052 75.4176 188.885 78.5093 186.052 83.4148Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="172.769" y="112.969" width="32" height="19" rx="6" transform="rotate(-150 172.769 112.969)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="172.769" y="112.969" width="32" height="19" rx="6" transform="rotate(-150 172.769 112.969)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="149.557" y="89.1743" width="4" height="32" rx="2" transform="rotate(-60 149.557 89.1743)" fill="#CDF4DD"/>
|
<rect x="149.557" y="89.1743" width="4" height="32" rx="2" transform="rotate(-60 149.557 89.1743)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
@@ -1,21 +1,21 @@
|
|||||||
<svg width="237" height="252" viewBox="0 0 237 252" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="237" height="252" viewBox="0 0 237 252" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<rect x="196.607" y="142.667" width="32.2656" height="16.5938" rx="4" transform="rotate(16.8391 196.607 142.667)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="196.607" y="142.667" width="32.2656" height="16.5938" rx="4" transform="rotate(16.8391 196.607 142.667)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<path d="M178.342 171.193C180.901 162.736 189.833 157.955 198.291 160.514L216.192 165.932C224.649 168.492 229.431 177.424 226.871 185.881L210.055 241.439C208.776 245.668 204.31 248.059 200.081 246.779L166.866 236.726C162.637 235.446 160.246 230.98 161.526 226.751L178.342 171.193Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M178.342 171.193C180.901 162.736 189.833 157.955 198.291 160.514L216.192 165.932C224.649 168.492 229.431 177.424 226.871 185.881L210.055 241.439C208.776 245.668 204.31 248.059 200.081 246.779L166.866 236.726C162.637 235.446 160.246 230.98 161.526 226.751L178.342 171.193Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="201.447" y="148.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 201.447 148.949)" fill="#CDF4DD"/>
|
<rect x="201.447" y="148.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 201.447 148.949)" fill="#CDF4DD"/>
|
||||||
<rect x="209.389" y="151.352" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 209.389 151.352)" fill="#CDF4DD"/>
|
<rect x="209.389" y="151.352" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 209.389 151.352)" fill="#CDF4DD"/>
|
||||||
<rect x="217.33" y="153.756" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 217.33 153.756)" fill="#CDF4DD"/>
|
<rect x="217.33" y="153.756" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 217.33 153.756)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<rect x="150.723" y="109.167" width="32.2656" height="16.5938" rx="4" transform="rotate(-150 150.723 109.167)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="150.723" y="109.167" width="32.2656" height="16.5938" rx="4" transform="rotate(-150 150.723 109.167)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<path d="M175.004 85.5494C170.586 93.202 160.8 95.824 153.147 91.4058L136.95 82.0542C129.297 77.6359 126.675 67.8505 131.094 60.1978L160.117 9.92772C162.326 6.10138 167.219 4.79038 171.045 6.99952L201.099 24.3511C204.925 26.5602 206.236 31.4529 204.027 35.2793L175.004 85.5494Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M175.004 85.5494C170.586 93.202 160.8 95.824 153.147 91.4058L136.95 82.0542C129.297 77.6359 126.675 67.8505 131.094 60.1978L160.117 9.92772C162.326 6.10138 167.219 4.79038 171.045 6.99952L201.099 24.3511C204.925 26.5602 206.236 31.4529 204.027 35.2793L175.004 85.5494Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="147.439" y="101.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 147.439 101.949)" fill="#CDF4DD"/>
|
<rect x="147.439" y="101.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 147.439 101.949)" fill="#CDF4DD"/>
|
||||||
<rect x="140.254" y="97.8003" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 140.254 97.8003)" fill="#CDF4DD"/>
|
<rect x="140.254" y="97.8003" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 140.254 97.8003)" fill="#CDF4DD"/>
|
||||||
<rect x="133.068" y="93.6519" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 133.068 93.6519)" fill="#CDF4DD"/>
|
<rect x="133.068" y="93.6519" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 133.068 93.6519)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
<g opacity="0.6">
|
<g opacity="0.6">
|
||||||
<path d="M32.8015 122.764L35.7266 112.563L56.9458 118.648L53.9545 129.08C52.6533 133.618 53.9413 138.504 57.3104 141.81C60.9508 145.383 62.1371 150.768 60.3348 155.54L49.6241 183.896C48.5204 186.818 45.3597 188.404 42.3573 187.543L11.5784 178.717C8.5806 177.858 6.74113 174.845 7.34625 171.786L12.9588 143.41C13.9947 138.173 17.8826 133.96 23.0201 132.508C27.7474 131.172 31.4475 127.486 32.8015 122.764Z" stroke="#CDF4DD" stroke-width="4"/>
|
<path d="M32.8015 122.764L35.7266 112.563L56.9458 118.648L53.9545 129.08C52.6533 133.618 53.9413 138.504 57.3104 141.81C60.9508 145.383 62.1371 150.768 60.3348 155.54L49.6241 183.896C48.5204 186.818 45.3597 188.404 42.3573 187.543L11.5784 178.717C8.5806 177.858 6.74113 174.845 7.34625 171.786L12.9588 143.41C13.9947 138.173 17.8826 133.96 23.0201 132.508C27.7474 131.172 31.4475 127.486 32.8015 122.764Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="37.7793" y="95.1074" width="27.7521" height="16.4778" rx="6" transform="rotate(16 37.7793 95.1074)" stroke="#CDF4DD" stroke-width="4"/>
|
<rect x="37.7793" y="95.1074" width="27.7521" height="16.4778" rx="6" transform="rotate(16 37.7793 95.1074)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||||
<rect x="62.3047" y="110.26" width="3.46901" height="27.7521" rx="1.7345" transform="rotate(106 62.3047 110.26)" fill="#CDF4DD"/>
|
<rect x="62.3047" y="110.26" width="3.46901" height="27.7521" rx="1.7345" transform="rotate(106 62.3047 110.26)" fill="#CDF4DD"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,8 @@
|
|||||||
|
@import "../../../../styles/_utilities";
|
||||||
|
|
||||||
|
.recipeListBanner{
|
||||||
|
@apply spacing-horizontal;
|
||||||
|
@screen md {
|
||||||
|
padding:0 3.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Banner } from 'src/components/common'
|
||||||
|
import BannerRight from './assets/bannerrecipes.png'
|
||||||
|
import s from './RecipeListBanner.module.scss'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
const RecipeListBanner = ({ }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className={s.recipeListBanner}>
|
||||||
|
<Banner
|
||||||
|
data={
|
||||||
|
[{
|
||||||
|
title: "Save 15% on your first order",
|
||||||
|
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
|
||||||
|
imgLink: BannerRight.src,
|
||||||
|
size: "large",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div >
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecipeListBanner
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
@@ -0,0 +1,60 @@
|
|||||||
|
@import "../../../../../styles/_utilities";
|
||||||
|
|
||||||
|
.recipesItem {
|
||||||
|
@apply flex justify-between;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
|
||||||
|
@screen md{
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipesItemImage {
|
||||||
|
@apply transition-all duration-200;
|
||||||
|
width: 31%;
|
||||||
|
img {
|
||||||
|
@apply block object-cover;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 12.5rem;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply object-cover cursor-pointer;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
img{
|
||||||
|
height:100%;
|
||||||
|
border-radius: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recipesItemText {
|
||||||
|
width: 65%;
|
||||||
|
.recipesItemName{
|
||||||
|
@apply topline font-bold cursor-pointer;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-feature-settings: "salt" on;
|
||||||
|
color:var(--text-active);
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
&:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@screen md {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipesItemDescription{
|
||||||
|
color:var(--text-label);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
import React from 'react';
|
||||||
|
import s from './RecipesItem.module.scss';
|
||||||
|
interface RecipesItem {
|
||||||
|
image:string,
|
||||||
|
name: string,
|
||||||
|
description:string,
|
||||||
|
link: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
|
||||||
|
return (
|
||||||
|
<div className={s.recipesItem}>
|
||||||
|
<div className={s.recipesItemImage}>
|
||||||
|
<Link href={link}>
|
||||||
|
<a>
|
||||||
|
<img src={image} />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<Link href={link}>
|
||||||
|
<a className={s.recipesItemText}>
|
||||||
|
<div className={s.recipesItemName}>{name}</div>
|
||||||
|
<div className={s.recipesItemDescription}>{description}</div>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div >
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecipesItem
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
@import "../../../../styles/_utilities";
|
||||||
|
|
||||||
|
.recipesListWrapper {
|
||||||
|
@apply spacing-horizontal;
|
||||||
|
@screen md{
|
||||||
|
padding:0 3.2rem;
|
||||||
|
padding-bottom:5.6rem;
|
||||||
|
}
|
||||||
|
.breadcrumb{
|
||||||
|
padding:1rem 0;
|
||||||
|
}
|
||||||
|
.recipesListPageMain{
|
||||||
|
@screen md {
|
||||||
|
@apply flex;
|
||||||
|
}
|
||||||
|
.categories{
|
||||||
|
@apply hidden;
|
||||||
|
@screen md {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
@screen xl{
|
||||||
|
@apply block;
|
||||||
|
width:25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recipesList{
|
||||||
|
@screen md {
|
||||||
|
@apply flex justify-between flex-wrap w-full;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
@screen xl {
|
||||||
|
width:75%;
|
||||||
|
}
|
||||||
|
.inner{
|
||||||
|
@screen md {
|
||||||
|
@apply flex flex-col items-center justify-center;
|
||||||
|
}
|
||||||
|
.boxItem {
|
||||||
|
@screen md {
|
||||||
|
@apply flex justify-between flex-wrap;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
@screen md {
|
||||||
|
width: calc(97% / 2);
|
||||||
|
margin-top:1rem;
|
||||||
|
}
|
||||||
|
@screen lg{
|
||||||
|
width: calc(97% / 3);
|
||||||
|
margin-top:1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recipesPagination{
|
||||||
|
@apply flex justify-center w-full;
|
||||||
|
margin: 3rem 0;
|
||||||
|
@screen md {
|
||||||
|
@apply flex justify-center ;
|
||||||
|
margin:2rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.boxSelect{
|
||||||
|
@apply flex justify-between w-full;
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
|
||||||
|
@screen xl {
|
||||||
|
@apply block;
|
||||||
|
width: auto;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.categorySelectCate{
|
||||||
|
@screen xl {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
@apply font-bold topline ;
|
||||||
|
color:var(--text-active);
|
||||||
|
@screen xl {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select{
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
217
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
Normal file
217
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
|
||||||
|
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
|
||||||
|
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
|
||||||
|
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
|
||||||
|
import image12 from "../../../../../public/assets/images/image12.png";
|
||||||
|
import image13 from "../../../../../public/assets/images/image13.png";
|
||||||
|
import image14 from "../../../../../public/assets/images/image14.png";
|
||||||
|
import RecipesItem from './RecipesItem/RecipesItem';
|
||||||
|
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
|
||||||
|
import s from './RecipesList.module.scss';
|
||||||
|
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||||
|
import { SelectCommon } from 'src/components/common';
|
||||||
|
|
||||||
|
const recipe:RecipeCardProps[] = [{
|
||||||
|
title: "Special Recipe of Vietnamese Phở",
|
||||||
|
description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
||||||
|
imageSrc: image12.src
|
||||||
|
},{
|
||||||
|
title: "Original Recipe of Curry",
|
||||||
|
description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
||||||
|
imageSrc: image13.src
|
||||||
|
},{
|
||||||
|
title: "The Best Recipe of Beef Noodle Soup",
|
||||||
|
description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
||||||
|
imageSrc: image14.src
|
||||||
|
},{
|
||||||
|
title: "Special Recipe of Vietnamese Phở",
|
||||||
|
description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
||||||
|
imageSrc: image12.src
|
||||||
|
},{
|
||||||
|
title: "Original Recipe of Curry",
|
||||||
|
description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
||||||
|
imageSrc: image13.src
|
||||||
|
},{
|
||||||
|
title: "The Best Recipe of Beef Noodle Soup",
|
||||||
|
description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
||||||
|
imageSrc: image14.src
|
||||||
|
}];
|
||||||
|
const BREADCRUMB = [
|
||||||
|
{
|
||||||
|
name: 'Special Recipes',
|
||||||
|
link: `#`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CATEGORY = [
|
||||||
|
{
|
||||||
|
name: 'All',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Malaysian',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=malaysia`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vietnamese',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=vietnamese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Thailand',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=thailand`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Indian',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=indian`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Lao',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=lao`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chinese',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=chinese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Korean',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=korean`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Japanese',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=japanese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Western',
|
||||||
|
link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=western`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CATEGORYSELECT = [
|
||||||
|
{
|
||||||
|
name: 'All',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Malaysian',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=malaysia`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vietnamese',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=vietnamese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Thailand',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=thailand`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Indian',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=indian`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Lao',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=lao`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chinese',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=chinese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Korean',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=korean`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Japanese',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=japanese`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Western',
|
||||||
|
value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=western`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const OPTIONSLECT=[
|
||||||
|
{
|
||||||
|
name:"Most Viewed",
|
||||||
|
value:"most-viewed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:"Lastest Blogs",
|
||||||
|
value:"lastest-blogs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:"Recent Blogs",
|
||||||
|
value:"recent-blogs"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface Props{
|
||||||
|
data?: RecipeCardProps[],
|
||||||
|
recipes?:{
|
||||||
|
id:string,
|
||||||
|
title:string,
|
||||||
|
image:string,
|
||||||
|
description:string,
|
||||||
|
link:string
|
||||||
|
}[],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const RecipesList = ({ data =recipe}:Props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={s.recipesListWrapper}>
|
||||||
|
<div className={s.breadcrumb}>
|
||||||
|
<BreadcrumbCommon crumbs={BREADCRUMB} />
|
||||||
|
</div>
|
||||||
|
<div className={s.recipesListPageMain}>
|
||||||
|
|
||||||
|
<div className={s.categories}>
|
||||||
|
<MenuNavigation categories={CATEGORY} heading="Categories"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={s.recipesList}>
|
||||||
|
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
|
||||||
|
|
||||||
|
<div className={s.boxSelect}>
|
||||||
|
<div className={s.categorySelectCate}>
|
||||||
|
<label htmlFor="">Categories</label>
|
||||||
|
<div className={s.select}>
|
||||||
|
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={s.categorySelectSort}>
|
||||||
|
<label htmlFor="" >Sort By</label>
|
||||||
|
<div className={s.select}>
|
||||||
|
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={s.inner}>
|
||||||
|
<div className={s.boxItem}>
|
||||||
|
{data?.map((item,index) => (
|
||||||
|
<div key={index} className={s.item}>
|
||||||
|
<RecipesItem
|
||||||
|
name={item.title}
|
||||||
|
image={item.imageSrc}
|
||||||
|
description={item.description}
|
||||||
|
link="#"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={s.recipesPagination}>
|
||||||
|
<PaginationCommon pageSize={6} total={9}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecipesList
|
||||||
2
src/components/modules/recipes-list/index.ts
Normal file
2
src/components/modules/recipes-list/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as RecipeListBanner } from './RecipeListBanner/RecipeListBanner'
|
||||||
|
export { default as RecipesList} from './RecipesList/RecipesList'
|
||||||
@@ -149,6 +149,7 @@
|
|||||||
.line {
|
.line {
|
||||||
@apply flex justify-between items-center;
|
@apply flex justify-between items-center;
|
||||||
> div {
|
> div {
|
||||||
|
flex: 1;
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 1.6rem;
|
margin-right: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,10 +10,9 @@ export const ROUTE = {
|
|||||||
PRODUCTS: '/products',
|
PRODUCTS: '/products',
|
||||||
PRODUCT_DETAIL: '/product',
|
PRODUCT_DETAIL: '/product',
|
||||||
ABOUT: '/about',
|
ABOUT: '/about',
|
||||||
BLOG_DETAIL: '/blogdetail',
|
BLOG_DETAIL: '/blog',
|
||||||
ACCOUNT: '/account',
|
ACCOUNT: '/account',
|
||||||
RECIPES: '/recipes',
|
RECIPES: '/recipes',
|
||||||
|
|
||||||
BUSSINESS: '/bussiness',
|
BUSSINESS: '/bussiness',
|
||||||
CONTACT: '/contact',
|
CONTACT: '/contact',
|
||||||
FAQ: '/faq',
|
FAQ: '/faq',
|
||||||
@@ -34,7 +33,9 @@ export const QUERY_KEY = {
|
|||||||
TAB: 'tab',
|
TAB: 'tab',
|
||||||
CATEGORY: 'category',
|
CATEGORY: 'category',
|
||||||
BRAND: 'brand',
|
BRAND: 'brand',
|
||||||
FEATURED: 'feature'
|
FEATURED: 'feature',
|
||||||
|
SORTBY:'sortby',
|
||||||
|
RECIPES:'recipes'
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum ProductFeature {
|
export enum ProductFeature {
|
||||||
@@ -48,3 +49,5 @@ export const KEY = {
|
|||||||
ENTER: 'Enter',
|
ENTER: 'Enter',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const OPTION_ALL = 'all';
|
||||||
|
export const DEFAULT_PAGE_SIZE=20
|
||||||
@@ -186,32 +186,38 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
|
|||||||
{
|
{
|
||||||
title: "Special Recipe of Vietnamese Phở",
|
title: "Special Recipe of Vietnamese Phở",
|
||||||
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
|
||||||
|
slug: "special-recipe-of-vietnamese-pho"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Original Recipe of Curry",
|
title: "Original Recipe of Curry",
|
||||||
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
|
||||||
|
slug:"original-recipe-of-curry"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "The Best Recipe of Beef Noodle Soup",
|
title: "The Best Recipe of Beef Noodle Soup",
|
||||||
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
|
||||||
|
slug:"the-best-recipe-of-beef-noodle-soup"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Special Recipe of Vietnamese Phở",
|
title: "Special Recipe of Vietnamese Phở",
|
||||||
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
|
||||||
|
slug: "special-recipe-of-vietnamese-pho"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Original Recipe of Curry",
|
title: "Original Recipe of Curry",
|
||||||
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
|
||||||
|
slug:"original-recipe-of-curry"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "The Best Recipe of Beef Noodle Soup",
|
title: "The Best Recipe of Beef Noodle Soup",
|
||||||
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
|
||||||
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
|
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
|
||||||
|
slug:"the-best-recipe-of-beef-noodle-soup"
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ export const LANGUAGE = {
|
|||||||
BUTTON_LABEL: {
|
BUTTON_LABEL: {
|
||||||
BUY_NOW: 'Buy now',
|
BUY_NOW: 'Buy now',
|
||||||
SHOP_NOW: 'Shop now',
|
SHOP_NOW: 'Shop now',
|
||||||
|
CONFIRM:'Confirm',
|
||||||
ADD_TO_CARD: 'Add to Cart',
|
ADD_TO_CARD: 'Add to Cart',
|
||||||
PREORDER: 'Pre-Order Now',
|
PREORDER: 'Pre-Order Now',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -20,6 +20,14 @@ export interface FeaturedProductProps {
|
|||||||
|
|
||||||
export interface RecipeProps {
|
export interface RecipeProps {
|
||||||
title: string
|
title: string
|
||||||
|
slug: string
|
||||||
|
description: string
|
||||||
|
imageSrc: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BlogProps {
|
||||||
|
title: string
|
||||||
|
slug: string
|
||||||
description: string
|
description: string
|
||||||
imageSrc: string
|
imageSrc: string
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user