crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into fixbug-13/9/2021-datnguyen

Browse Source
This commit is contained in:
unknown
2021-09-15 17:18:18 +07:00
parent 7d5d0396a0 40b825cb0f
commit 861b1b9fb5
177 changed files with 4304 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
next.config.js
View File

@@ -26,6 +26,7 @@ module.exports = withCommerceConfig({
images: { images: {
// todo: replace domains for images // todo: replace domains for images
domains: ['user-images.githubusercontent.com'], domains: ['user-images.githubusercontent.com'],
minimumCacheTTL: 60,
}, },
i18n: { i18n: {
locales: ['en-US', 'es'], locales: ['en-US', 'es'],
@@ -46,10 +47,10 @@ module.exports = withCommerceConfig({
// For Vendure, rewrite the local api url to the remote (external) api url. This is required // For Vendure, rewrite the local api url to the remote (external) api url. This is required
// to make the session cookies work. // to make the session cookies work.
isVendure && isVendure &&
process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && { process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`, source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`, destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
}, },
].filter(Boolean) ].filter(Boolean)
}, },
}) })

5
pages/_app.tsx
View File

@@ -1,8 +1,8 @@
import { ThemeProvider } from 'next-themes'; import { ThemeProvider } from 'next-themes';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import React, { FC, useEffect } from 'react'; import React, { FC, useEffect } from 'react';
import { Head } from 'src/components/common'; import { CustomShapeSvg, Head } from 'src/components/common';
import 'keen-slider/keen-slider.min.css'; import 'keen-slider/keen-slider.min.css';
import '../src/styles/main.scss'; import '../src/styles/main.scss';
@@ -19,6 +19,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
<> <>
<Head /> <Head />
<ThemeProvider> <ThemeProvider>
<CustomShapeSvg />
<Layout pageProps={pageProps}> <Layout pageProps={pageProps}>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout> </Layout>

9
pages/_error.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { Layout } from 'src/components/common'
import { ErrorContent } from 'src/components/modules/error-page'
export default function NotFound() {
return (
<ErrorContent/>
)
}
NotFound.Layout = Layout

15
pages/account-not-login.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import { Layout } from 'src/components/common';
import { AccountSignIn } from 'src/components/modules/account';
const AccountNotLogin = () => {
return (
<>
<AccountSignIn/>
</>
);
};
AccountNotLogin.Layout = Layout
export default AccountNotLogin;

14
pages/demo.tsx
View File

@@ -1,13 +1,13 @@
import { Layout } from 'src/components/common'; import { Layout } from 'src/components/common';
import { NotificationEmptyPage, NotificationHeading, NotificationBreadcrumb } from 'src/components/modules/Notification';
export default function Demo() { export default function Demo() {
return <> return (
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. <>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. <NotificationBreadcrumb />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. <NotificationHeading />
<NotificationEmptyPage />
</> </>
)
} }
Demo.Layout = Layout Demo.Layout = Layout

4
pages/index.tsx
View File

@@ -1,5 +1,6 @@
import { Layout } from 'src/components/common'; import { Layout } from 'src/components/common';
import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
export default function Home() { export default function Home() {
return ( return (
@@ -10,8 +11,9 @@ export default function Home() {
<HomeCollection /> <HomeCollection />
<HomeVideo /> <HomeVideo />
<FeaturedProductsCarousel/> <FeaturedProductsCarousel/>
<HomeSpice/>
<HomeCTA /> <HomeCTA />
<HomeRecipe /> <HomeRecipe />
<HomeSubscribe /> <HomeSubscribe />
{/* // todo: uncomment {/* // todo: uncomment

17
pages/notifications.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Layout } from 'src/components/common';
import { NotificationBreadcrumb, NotificationHeading, NotificationPage } from 'src/components/modules/Notification';
const Notification = () => {
return (
<>
<NotificationBreadcrumb />
<NotificationHeading />
<NotificationPage />
</>
)
}
Notification.Layout = Layout
export default Notification;

7
pages/product/[slug].tsx
View File

@@ -1,7 +1,7 @@
import { Layout, RecipeDetail } from 'src/components/common' import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail' import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
export default function Slug() { export default function Slug() {
return <> return <>
@@ -10,6 +10,7 @@ export default function Slug() {
<RecommendedRecipes data={RECIPE_DATA_TEST} /> <RecommendedRecipes data={RECIPE_DATA_TEST} />
<ReleventProducts /> <ReleventProducts />
<ViewedProducts /> <ViewedProducts />
<RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts"/>
</> </>
} }

2
pages/products.tsx
View File

@@ -1,4 +1,5 @@
import { Layout } from 'src/components/common'; import { Layout } from 'src/components/common';
import { ViewedProducts } from 'src/components/modules/product-detail';
import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter'; import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter';
import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner'; import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner';
import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList'; import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
@@ -10,6 +11,7 @@ export default function Products() {
<> <>
<ProductListBanner /> <ProductListBanner />
<ProductListFilter/> <ProductListFilter/>
<ViewedProducts/>
</> </>
) )
} }

12
pages/recipe/[slug].tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Layout, RecipeDetail, RecommendedRecipes } from 'src/components/common'
import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
export default function Slug() {
return <div className="page-recipe-detail">
<RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
<RecommendedRecipes data={RECIPE_DATA_TEST} />
</div>
}
Slug.Layout = Layout

BIN
public/assets/images/accountsignin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/fonts/Norquay-bold.otf Normal file
View File

Binary file not shown.

BIN
public/fonts/Norquay-bold.woff Normal file
View File

Binary file not shown.

4
public/fonts/style.css Normal file
View File

@@ -0,0 +1,4 @@
@font-face {
font-family: "Norquay-bold";
src: url("./Norquay-bold.otf") format("opentype"), url("./Norquay-bold.woff") format("woff");
}

634
report.20210914.152506.13752.0.001.json Normal file
View File

@@ -0,0 +1,634 @@
{
"header": {
"reportVersion": 1,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20210914.152506.13752.0.001.json",
"dumpEventTime": "2021-09-14T15:25:06Z",
"dumpEventTimeStamp": "1631607906529",
"processId": 13752,
"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": 121689328,
"nice": 0,
"sys": 59562031,
"idle": 448265421,
"irq": 6192437
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 124353031,
"nice": 0,
"sys": 45453531,
"idle": 459710031,
"irq": 1005640
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 137889625,
"nice": 0,
"sys": 46363593,
"idle": 445263359,
"irq": 561437
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 139168734,
"nice": 0,
"sys": 43450859,
"idle": 446897000,
"irq": 467531
}
],
"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:d442:f151:35d4:8126",
"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.13",
"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": "0x00007ff794f61759",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
},
{
"pc": "0x00007ff794f65b7c",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
},
{
"pc": "0x00007ff794f64b38",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
},
{
"pc": "0x00007ff79505446b",
"symbol": "v8::base::CPU::has_sse+37723"
},
{
"pc": "0x00007ff795858d9e",
"symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
},
{
"pc": "0x00007ff795840de1",
"symbol": "v8::SharedArrayBuffer::Externalize+833"
},
{
"pc": "0x00007ff79570e6ac",
"symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
},
{
"pc": "0x00007ff795719a50",
"symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
},
{
"pc": "0x00007ff795716584",
"symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
},
{
"pc": "0x00007ff79570be13",
"symbol": "v8::internal::Heap::CollectGarbage+1283"
},
{
"pc": "0x00007ff79570a5e4",
"symbol": "v8::internal::Heap::AddRetainedMap+2356"
},
{
"pc": "0x00007ff79572b8b5",
"symbol": "v8::internal::Factory::NewFillerObject+53"
},
{
"pc": "0x00007ff795497a17",
"symbol": "v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+3687"
},
{
"pc": "0x00007ff795c84d3d",
"symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
},
{
"pc": "0x000003ffcfc4917f",
"symbol": ""
}
],
"javascriptHeap": {
"totalMemory": 2191572992,
"totalCommittedMemory": 2191572992,
"usedMemory": 2084024144,
"availableMemory": 44664008,
"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": 5279488,
"available": 11480320
},
"old_space": {
"memorySize": 1724231680,
"committedMemory": 1724231680,
"capacity": 1661472712,
"used": 1651520712,
"available": 9952000
},
"code_space": {
"memorySize": 4620288,
"committedMemory": 4620288,
"capacity": 3800032,
"used": 3800032,
"available": 0
},
"map_space": {
"memorySize": 9179136,
"committedMemory": 9179136,
"capacity": 4157280,
"used": 4157280,
"available": 0
},
"large_object_space": {
"memorySize": 418529280,
"committedMemory": 418529280,
"capacity": 418137088,
"used": 418137088,
"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": 2176.56,
"kernelCpuSeconds": 163.562,
"cpuConsumptionPercent": 12.5503,
"maxRss": 3128586240,
"pageFaults": {
"IORequired": 15608643,
"IONotRequired": 0
},
"fsActivity": {
"reads": 46277,
"writes": 785844
}
},
"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_11504_LVARTKDVZJSQMMYN",
"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": "[![Deploy with Vercel](https://vercel.com/button)](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": "6cad0d89cac27109ededf5d8cbaf23280a95fea9",
"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": "PORT=3005 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": "c2ff45063f82658e",
"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"
]
}

634
report.20210914.155439.6404.0.001.json Normal file
View File

@@ -0,0 +1,634 @@
{
"header": {
"reportVersion": 1,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20210914.155439.6404.0.001.json",
"dumpEventTime": "2021-09-14T15:54:39Z",
"dumpEventTimeStamp": "1631609679847",
"processId": 6404,
"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": 122321031,
"nice": 0,
"sys": 59816781,
"idle": 449152296,
"irq": 6214000
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 125016468,
"nice": 0,
"sys": 45652765,
"idle": 460620687,
"irq": 1009312
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 138604812,
"nice": 0,
"sys": 46560562,
"idle": 446124531,
"irq": 563593
},
{
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
"speed": 2395,
"user": 139890312,
"nice": 0,
"sys": 43625859,
"idle": 447773750,
"irq": 469156
}
],
"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:d442:f151:35d4:8126",
"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.13",
"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": "0x00007ff794f61759",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
},
{
"pc": "0x00007ff794f65b7c",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
},
{
"pc": "0x00007ff794f64b38",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
},
{
"pc": "0x00007ff79505446b",
"symbol": "v8::base::CPU::has_sse+37723"
},
{
"pc": "0x00007ff795858d9e",
"symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
},
{
"pc": "0x00007ff795840de1",
"symbol": "v8::SharedArrayBuffer::Externalize+833"
},
{
"pc": "0x00007ff79570e6ac",
"symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
},
{
"pc": "0x00007ff795719a50",
"symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
},
{
"pc": "0x00007ff795716584",
"symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
},
{
"pc": "0x00007ff79570be13",
"symbol": "v8::internal::Heap::CollectGarbage+1283"
},
{
"pc": "0x00007ff79570a5e4",
"symbol": "v8::internal::Heap::AddRetainedMap+2356"
},
{
"pc": "0x00007ff79572b8b5",
"symbol": "v8::internal::Factory::NewFillerObject+53"
},
{
"pc": "0x00007ff795497b89",
"symbol": "v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+4057"
},
{
"pc": "0x00007ff795c84d3d",
"symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
},
{
"pc": "0x0000004893120f89",
"symbol": ""
}
],
"javascriptHeap": {
"totalMemory": 2180952064,
"totalCommittedMemory": 2180952064,
"usedMemory": 2077263400,
"availableMemory": 46925016,
"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": 3774664,
"available": 12985144
},
"old_space": {
"memorySize": 1710075904,
"committedMemory": 1710075904,
"capacity": 1639289184,
"used": 1639201928,
"available": 87256
},
"code_space": {
"memorySize": 3571712,
"committedMemory": 3571712,
"capacity": 2926848,
"used": 2926848,
"available": 0
},
"map_space": {
"memorySize": 5771264,
"committedMemory": 5771264,
"capacity": 3972960,
"used": 3972960,
"available": 0
},
"large_object_space": {
"memorySize": 426520576,
"committedMemory": 426520576,
"capacity": 426257456,
"used": 426257456,
"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": 939.421,
"kernelCpuSeconds": 35.375,
"cpuConsumptionPercent": 103.702,
"maxRss": 3224653824,
"pageFaults": {
"IORequired": 3779383,
"IONotRequired": 0
},
"fsActivity": {
"reads": 14745,
"writes": 85913
}
},
"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_11504_LVARTKDVZJSQMMYN",
"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": "[![Deploy with Vercel](https://vercel.com/button)](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": "571bfe44ac1837b6c07951d9d711508d380a5ef2",
"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": "PORT=3005 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": "cbd3025f1135a5fa",
"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\\dbghelp.dll",
"C:\\WINDOWS\\System32\\msvcrt.dll",
"C:\\WINDOWS\\System32\\ucrtbase.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\\PSAPI.DLL",
"C:\\WINDOWS\\System32\\CRYPT32.dll",
"C:\\WINDOWS\\System32\\bcrypt.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"
]
}

6
src/components/common/Author/Author.module.scss
View File

@@ -2,11 +2,15 @@
.authorWarper{ .authorWarper{
@apply flex flex-row items-center; @apply flex flex-row items-center;
.authorImage{ .authorImage {
width:3.2rem; width:3.2rem;
height:3.2rem; height:3.2rem;
border-radius:3.2rem; border-radius:3.2rem;
div{
min-width:3.2rem !important;
}
} }
.authorName{ .authorName{
margin-left:1rem; margin-left:1rem;
color:var(--text-label); color:var(--text-label);

5
src/components/common/Author/Author.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; 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 ImgWithLink from "../ImgWithLink/ImgWithLink";
interface Props { interface Props {
image:string, image:string,
@@ -11,7 +12,9 @@ const Author = ({image,name}:Props) =>{
return ( return (
<div className={classNames(s.authorWarper)}> <div className={classNames(s.authorWarper)}>
<img className={classNames(s.authorImage)} src={image} alt=""/> <div className={classNames(s.authorImage)} >
<ImgWithLink src={image} alt="author" />
</div>
<div className={classNames(s.authorName)}>{name}</div> <div className={classNames(s.authorName)}>{name}</div>
</div> </div>
) )

18
src/components/common/Banner/Banner.tsx
View File

@@ -1,3 +1,4 @@
import { TOptionsEvents } from 'keen-slider'
import React, { memo } from 'react' import React, { memo } from 'react'
import CarouselCommon from '../CarouselCommon/CarouselCommon' import CarouselCommon from '../CarouselCommon/CarouselCommon'
import BannerItem, { BannerItemProps } from './BannerItem/BannerItem' import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
@@ -6,18 +7,29 @@ interface Props {
data: BannerItemProps[], data: BannerItemProps[],
} }
const option = { const option: TOptionsEvents = {
slidesPerView: 1, slidesPerView: 1,
breakpoints: {} mode: 'free',
} }
const Banner = memo(({ data }: Props) => { const Banner = memo(({ data }: Props) => {
if (data.length === 1) {
const item = data[0]
return <BannerItem
title={item.title}
imgLink={item.imgLink}
subtitle={item.subtitle}
buttonLabel={item.buttonLabel}
linkButton={item.linkButton}
size={item.size}
/>
}
return ( return (
<CarouselCommon<BannerItemProps> <CarouselCommon<BannerItemProps>
data={data} data={data}
itemKey="banner" itemKey="banner"
Component={BannerItem} Component={BannerItem}
option={option} option={option}
isDot = {true} isDot={true}
/> />
) )
}) })

28
src/components/common/Banner/BannerItem/BannerItem.module.scss
View File

@@ -1,16 +1,18 @@
@import "../../../../styles/utilities"; @import "../../../../styles/utilities";
.bannerItem { .bannerItem {
@apply bg-primary-light custom-border-radius-lg overflow-hidden; @apply bg-primary-light shape-common-lg overflow-hidden;
@screen md { padding: 0;
border: 1px solid var(--primary);
}
&.large { &.large {
margin-bottom: 2.8rem; margin-bottom: 2.8rem;
background-image: url("./pattern.svg");
background-repeat: repeat;
background-size: auto;
.inner { .inner {
background-size: cover;
background-position: center bottom;
@screen xl { @screen xl {
@apply bg-right-bottom; background-position: right bottom;
background-size: unset;
} }
} }
} }
@@ -19,13 +21,10 @@
background-size: 90%; background-size: 90%;
background-position: right -500% bottom 0%; background-position: right -500% bottom 0%;
.content { .content {
background-image: linear-gradient( background-image: linear-gradient(to right, rgb(227, 242, 233) 63%, rgb(227, 242, 233, 0));
to right,
rgb(227, 242, 233, 0.9), padding: 2rem;
rgb(227, 242, 233, 0.5) 80%, padding-bottom: 4rem;
rgb(227, 242, 233, 0)
);
padding: 1.6rem;
max-width: 37rem; max-width: 37rem;
@screen md { @screen md {
max-width: 49.6rem; max-width: 49.6rem;
@@ -38,9 +37,6 @@
} }
.subHeading { .subHeading {
@apply sub-headline; @apply sub-headline;
@screen md {
@apply caption;
}
} }
} }

1
src/components/common/Banner/BannerItem/pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

160
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@@ -1,102 +1,127 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.buttonCommon { .buttonCommon {
@apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold; @apply shape-common;
display: flex; .inner {
justify-content: center; padding: 1rem 2rem;
align-items: center; @apply bg-primary transition-all duration-200 text-white font-bold;
padding: 1rem 2rem; display: flex;
@screen md { justify-content: center;
padding: 0.8rem 1.6rem; align-items: center;
} @screen md {
@screen lg { padding: 1.6rem 1.6rem;
padding: 0.8rem 3.2rem; }
} @screen lg {
&:disabled { padding: 1.6rem 3.2rem;
filter: brightness(0.9); }
cursor: not-allowed; &:disabled {
color: var(--disabled); filter: brightness(0.9);
} cursor: not-allowed;
&:hover { color: var(--disabled);
@apply shadow-md; }
&:not(:disabled) { &:hover {
@apply shadow-md;
&:not(:disabled) {
filter: brightness(1.05);
}
}
&:focus {
outline: none;
filter: brightness(1.05); filter: brightness(1.05);
} }
&:focus-visible {
outline: 2px solid var(--text-active);
}
} }
&:focus {
outline: none;
filter: brightness(1.05);
}
&:focus-visible {
outline: 2px solid var(--text-active);
}
&.loading { &.loading {
&::before { .inner {
content: ""; &::after {
border-radius: 50%; content: "";
width: 1.6rem; border-radius: 50%;
height: 1.6rem; width: 1.6rem;
border: 3px solid rgba(170, 170, 170, 0.5); height: 1.6rem;
border-top: 3px solid var(--white); border: 3px solid rgba(170, 170, 170, 0.5);
-webkit-animation: spin 2s linear infinite; border-top: 3px solid var(--white);
animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
margin-right: 0.8rem; animation: spin 2s linear infinite;
margin-right: 0.8rem;
}
} }
} }
&.light { &.light {
@apply text-base bg-white; @apply shape-common-border;
border: 1px solid var(--text-active); &::before {
background-color: var(--text-active);
}
.inner {
@apply text-base bg-white;
}
&.loading { &.loading {
&::before { .inner {
border-top-color: var(--primary); &::after {
border-top-color: var(--primary);
}
} }
} }
} }
&.lightBorderNone { &.lightBorderNone {
@apply bg-white text-primary; .inner {
@apply bg-white text-primary;
}
&.loading { &.loading {
&::before { .inner::after {
border-top-color: var(--primary); border-top-color: var(--primary);
} }
} }
} }
&.ghost { &.ghost {
@apply bg-white text-primary; @apply shape-common-border;
border: 1px solid var(--primary); .inner {
@apply bg-white text-primary;
}
&::before {
background-color: var(--primary);
}
&.loading { &.loading {
&::before { .inner::after {
border-top-color: var(--text-active); border-top-color: var(--text-active);
} }
} }
} }
&.onlyIcon { &.onlyIcon {
padding: 0.8rem; .inner {
.icon { padding: 1rem;
margin: 0; @screen md {
padding: 1.6rem;
}
.icon {
margin: 0;
}
} }
} }
&.large { &.large {
padding: 1rem 1.5rem; .inner {
&.onlyIcon { padding: 1rem 1.6rem;
padding: 1rem;
}
@screen md {
padding: 1.6rem 3.2rem;
&.onlyIcon { &.onlyIcon {
padding: 1.6rem; padding: 1rem;
}
@screen md {
padding: 1.6rem 3.2rem;
&.onlyIcon {
padding: 1.6rem;
}
}
@screen lg {
padding: 1.6rem 4.8rem;
} }
} }
@screen lg {
padding: 1.6rem 4.8rem;
}
&.loading { &.loading {
&::before { .inner::before {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
} }
@@ -104,16 +129,21 @@
} }
&.preserve { &.preserve {
flex-direction: row-reverse; .inner {
.icon { flex-direction: row-reverse;
margin: 0 0 0 1.6rem; .icon {
margin: 0 0 0 1.6rem;
}
} }
} }
.icon { .icon {
margin: 0 1.6rem 0 0; margin: 0 1.6rem 0 0;
svg path { svg {
fill: currentColor; height: 2rem;
path {
fill: currentColor;
}
} }
} }
} }

10
src/components/common/ButtonCommon/ButtonCommon.tsx
View File

@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
> >
{ <div className={s.inner}>
icon && <span className={s.icon}>{icon}</span> {
} icon && <span className={s.icon}>{icon}</span>
<span className={s.label}>{children}</span> }
<span className={s.label}>{children}</span>
</div>
</button> </button>
) )
}) })

5
src/components/common/CardBlog/CardBlog.module.scss
View File

@@ -4,8 +4,6 @@
@apply inline-flex flex-col justify-start; @apply inline-flex flex-col justify-start;
max-width: 39.2rem; max-width: 39.2rem;
.image { .image {
width: 100%;
max-height: 22rem;
border-radius: 2.4rem; border-radius: 2.4rem;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@@ -13,6 +11,9 @@
img{ img{
border-radius: 2.4rem; border-radius: 2.4rem;
} }
> div{
min-height: 22rem;
}
} }
.title { .title {
padding: 1.6rem 0.8rem 0.4rem 0.8rem; padding: 1.6rem 0.8rem 0.4rem 0.8rem;

4
src/components/common/CardBlog/CardBlog.tsx
View File

@@ -2,7 +2,9 @@ import Link from 'next/link'
import React from 'react' import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils' import { ROUTE } from 'src/utils/constanst.utils'
import { BlogProps } from 'src/utils/types.utils' import { BlogProps } from 'src/utils/types.utils'
import { ImgWithLink } from '..'
import s from './CardBlog.module.scss' import s from './CardBlog.module.scss'
export interface BlogCardProps extends BlogProps { export interface BlogCardProps extends BlogProps {
// todo: edit when intergrate API // todo: edit when intergrate API
@@ -14,7 +16,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
<Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}> <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
<a> <a>
<div className={s.image}> <div className={s.image}>
<img src={imageSrc} alt="image cardblog" /> <ImgWithLink src={imageSrc} alt="image cardblog" />
</div> </div>
</a> </a>
</Link> </Link>

1
src/components/common/CarouselCommon/CarouselCommon.module.scss
View File

@@ -9,6 +9,7 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: .8rem; border-radius: .8rem;
backdrop-filter: saturate(180%) blur(10px);
&:focus { &:focus {
outline: none; outline: none;
} }

17
src/components/common/CarouselCommon/CarouselCommon.tsx
View File

@@ -15,6 +15,7 @@ export interface CarouselCommonProps<T> {
option: TOptionsEvents option: TOptionsEvents
keenClassname?: string keenClassname?: string
isPadding?: boolean isPadding?: boolean
defaultComponentProps?: object
} }
const CarouselCommon = <T,>({ const CarouselCommon = <T,>({
@@ -25,7 +26,8 @@ const CarouselCommon = <T,>({
isPadding = false, isPadding = false,
isArrow = true, isArrow = true,
isDot = false, isDot = false,
option: { slideChanged,slidesPerView=1, ...sliderOption }, defaultComponentProps,
option: { slideChanged,slidesPerView, ...sliderOption },
}: CarouselCommonProps<T>) => { }: CarouselCommonProps<T>) => {
const [currentSlide, setCurrentSlide] = React.useState(0) const [currentSlide, setCurrentSlide] = React.useState(0)
const [dotArr, setDotArr] = React.useState<number[]>([]) const [dotArr, setDotArr] = React.useState<number[]>([])
@@ -68,11 +70,14 @@ const CarouselCommon = <T,>({
[s.isPadding]: isPadding, [s.isPadding]: isPadding,
})} })}
> >
{data.map((props, index) => ( {data?.map((props, index) => {
<div className="keen-slider__slide" key={`${itemKey}-${index}`}> const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props
<Component {...props} /> return (
</div> <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
))} <Component {...allProps} />
</div>
)
})}
</div> </div>
{slider && isArrow && ( {slider && isArrow && (
<> <>

5
src/components/common/CartDrawer/CartDrawer.module.scss
View File

@@ -4,9 +4,6 @@
.cartDrawer { .cartDrawer {
@apply flex flex-col h-full; @apply flex flex-col h-full;
.body { .body {
@apply overflow-y-auto overflow-x-hidden h-full custom-scroll; @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll;
}
.bottom {
padding-top: 1.6rem;
} }
} }

4
src/components/common/CartDrawer/CartDrawer.tsx
View File

@@ -23,9 +23,9 @@ const CartDrawer = ({ visible, onClose }: Props) => {
<ProductsInCart data={PRODUCT_CART_DATA_TEST}/> <ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
<CartRecommendation /> <CartRecommendation />
</div> </div>
<div className={s.bottom}> <div>
<CartMessage /> <CartMessage />
<CartCheckoutButton /> <CartCheckoutButton onClose={onClose}/>
</div> </div>
</div> </div>
</DrawerCommon> </DrawerCommon>

2
src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
View File

@@ -1,5 +1,7 @@
.cartCheckoutButton { .cartCheckoutButton {
display: block;
padding: 1.6rem; padding: 1.6rem;
width: 100%;
button { button {
width: 100%; width: 100%;
} }

17
src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
View File

@@ -1,12 +1,21 @@
import React, { memo } from 'react'; import React, { memo } from 'react';
import { ButtonCommon } from 'src/components/common'; import { ButtonCommon } from 'src/components/common';
import s from './CartCheckoutButton.module.scss'; import s from './CartCheckoutButton.module.scss';
import Link from 'next/link'
import { ROUTE } from 'src/utils/constanst.utils';
const CartCheckoutButton = memo(() => { interface Props {
onClose: () => void
}
const CartCheckoutButton = memo(({ onClose }: Props) => {
return ( return (
<div className={s.cartCheckoutButton}> <Link href={ROUTE.CHECKOUT}>
<ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon> <a className={s.cartCheckoutButton}>
</div> <ButtonCommon size='large' onClick={onClose}>Check out - Rp 120.500</ButtonCommon>
</a>
</Link>
) )
}) })

15
src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
View File

@@ -1,7 +1,8 @@
@import '../../../../../styles/utilities'; @import "../../../../../styles/utilities";
.cartRecommendation { .cartRecommendation {
@apply w-full bg-background-gray; @apply w-full bg-background-gray;
padding-bottom: 5.4rem;
.top { .top {
@apply flex justify-between items-center; @apply flex justify-between items-center;
padding: 1.6rem; padding: 1.6rem;
@@ -12,14 +13,10 @@
.productCardWarpper { .productCardWarpper {
padding-left: 1.6rem; padding-left: 1.6rem;
:global(.customArrow) { :global(.customArrow) {
@apply bg-line; @apply bg-line shadow-md;
@screen lg { opacity: 0.8;
&:global(.leftArrow) { &:global(.rightArrow) {
left: calc(-6.4rem - 2rem); right: 1rem;
}
&:global(.rightArrow) {
right: calc(-6.4rem - 2rem);
}
} }
} }
} }

11
src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
View File

@@ -7,14 +7,20 @@ import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
import s from './CartRecommendation.module.scss'; import s from './CartRecommendation.module.scss';
const option: TOptionsEvents = { const option: TOptionsEvents = {
slidesPerView: 2, slidesPerView: 1.5,
mode: 'free', mode: 'free',
breakpoints: { breakpoints: {
'(min-width: 640px)': { '(min-width: 640px)': {
slidesPerView: 1, slidesPerView: 1.5,
}, },
'(min-width: 768px)': { '(min-width: 768px)': {
slidesPerView: 2.5, slidesPerView: 2.5,
},
'(min-width: 1008px)': {
slidesPerView: 2.2,
},
'(min-width: 1440px)': {
slidesPerView: 2.5,
} }
}, },
} }
@@ -34,6 +40,7 @@ const CartRecommendation = () => {
Component={ProductCard} Component={ProductCard}
itemKey="cart-recommendation" itemKey="cart-recommendation"
option={option} option={option}
defaultComponentProps={{ isSingleButton: true }}
/> />
</div> </div>
</div> </div>

42
src/components/common/DrawerCommon/DrawerCommon.module.scss
View File

@@ -1,21 +1,40 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.drawerCommon { .drawerCommon {
@apply fixed flex justify-end transition-all duration-200; @apply fixed flex justify-end transition-all duration-500;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
right: 0; right: 0;
height: 100vh; height: 100vh;
width: 90%; width: 100%;
box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
z-index: 20000; z-index: 20000;
transform: none;
&.hide {
.innerWrap {
background: none;
}
transform: translateX(110%);
}
&.show {
.innerWrap {
background: rgba(0, 0, 0, 0.2);
animation: animateBackground 0.8s;
}
}
.innerWrap {
@apply w-full;
}
.inner { .inner {
@apply flex flex-col bg-white; @apply flex flex-col bg-white;
width: fit-content; width: fit-content;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
margin-right: 0; margin-left: auto;
box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
// transform: none;
@screen md { @screen md {
max-width: 52rem; max-width: 52rem;
} }
@@ -39,14 +58,21 @@
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
} }
&.hide {
transform: translateX(110%);
}
@screen md { @screen md {
width: unset;
.inner { .inner {
min-width: 48rem; min-width: 48rem;
} }
} }
} }
@keyframes animateBackground {
0%,
50% {
background: none;
}
100% {
background: rgba(0, 0, 0, 0.2);
}
}

33
src/components/common/DrawerCommon/DrawerCommon.tsx
View File

@@ -11,22 +11,33 @@ interface Props {
} }
const DrawerCommon = ({ title, visible, children, onClose }: Props) => { const DrawerCommon = ({ title, visible, children, onClose }: Props) => {
const refInner = useRef<HTMLDivElement>(null)
const handleClickOut = (e: any) => {
if (e.target.contains(refInner.current)) {
onClose()
}
}
return ( return (
<div className={classNames({ <div className={classNames({
[s.drawerCommon]: true, [s.drawerCommon]: true,
[s.hide]: !visible [s.hide]: !visible,
[s.show]: visible,
})}> })}>
<div className={s.inner}> <div className={s.innerWrap} onClick={handleClickOut}>
<div className={s.top}> <div className={s.inner} ref={refInner}>
<h4 className={s.heading}> <div className={s.top}>
{title} <h4 className={s.heading}>
</h4> {title}
<div className={s.iconClose} onClick={onClose}> </h4>
<IconClose /> <div className={s.iconClose} onClick={onClose}>
<IconClose />
</div>
</div>
<div className={s.content}>
{children}
</div> </div>
</div>
<div className={s.content}>
{children}
</div> </div>
</div> </div>
</div> </div>

20
src/components/common/Header/Header.module.scss
View File

@@ -6,20 +6,28 @@
left: 0; left: 0;
z-index: 9999; z-index: 9999;
margin-bottom: 3.2rem; margin-bottom: 3.2rem;
@screen md {
@apply relative;
}
&.full { &.full {
@apply shadow-none; @apply shadow-none;
border: 1px solid var(--border-line);
} }
.menu { .menu {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding-left: 3.2rem; padding-left: 3.2rem;
padding-right: 3.2rem; padding-right: 3.2rem;
} }
.logo { .logo {
@apply font-logo; @apply font-logo;
} }
@screen md {
@apply relative;
&.full {
border: 1px solid var(--border-line);
}
.menu {
@apply shadow-none;
}
}
} }
.headerSticky { .headerSticky {
@@ -33,13 +41,13 @@
transition: all 0.2s; transition: all 0.2s;
&.show { &.show {
display: block; display: block;
animation: showHeaderSticky 0.2s; animation: showHeaderSticky 0.4s;
} }
} }
@keyframes showHeaderSticky { @keyframes showHeaderSticky {
0% { 0% {
transform: translateY(-7rem); transform: scale(.95);
} }
100% { 100% {
transform: none; transform: none;

57
src/components/common/Header/Header.tsx
View File

@@ -1,7 +1,6 @@
import classNames from 'classnames' import classNames from 'classnames'
import React, { memo, useEffect, useMemo, useRef, useState } from 'react' import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
import { useModalCommon } from 'src/components/hooks' import { useModalCommon } from 'src/components/hooks'
import { isMobile } from 'src/utils/funtion.utils'
import { CartDrawer } from '..' import { CartDrawer } from '..'
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
@@ -11,10 +10,11 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
import s from './Header.module.scss' import s from './Header.module.scss'
interface props { interface props {
toggleFilter: () => void toggleFilter: () => void,
visibleFilter: boolean
} }
const Header = memo(({ toggleFilter }: props) => { const Header = memo(({ toggleFilter, visibleFilter }: props) => {
const headeFullRef = useRef<HTMLDivElement>(null) const headeFullRef = useRef<HTMLDivElement>(null)
const [isFullHeader, setIsFullHeader] = useState<boolean>(true) const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@@ -29,53 +29,52 @@ const Header = memo(({ toggleFilter }: props) => {
} }
} }
const headerHeight = useMemo(() => {
return headeFullRef.current?.offsetHeight
}, [headeFullRef.current])
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
if (!isMobile()) { if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) {
if (!headerHeight || window.scrollY > headerHeight) { setIsFullHeader(false)
setIsFullHeader(false) } else {
} else { setIsFullHeader(true)
setIsFullHeader(true)
}
} }
// if (!isMobile()) {
// } else {
// setIsFullHeader(true)
// }
} }
window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', handleScroll)
return () => { return () => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener('scroll', handleScroll)
} }
}, [headerHeight]) }, [headeFullRef.current])
return ( return (
<> <>
<header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
<HeaderHighLight />
<div className={s.menu}>
<HeaderMenu
toggleFilter={toggleFilter}
toggleCart={toggleCart}
isFull={isFullHeader}
openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} />
<HeaderSubMenu />
</div>
</header>
<div className={classNames({ <div className={classNames({
[s.headerSticky]: true, [s.headerSticky]: true,
[s.show]: !isFullHeader [s.show]: !isFullHeader
})}> })}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu
isStickyHeader={true}
toggleFilter={toggleFilter} toggleFilter={toggleFilter}
toggleCart={toggleCart} toggleCart={toggleCart}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
</div> </div>
<header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
<HeaderHighLight />
<div className={s.menu}>
<HeaderMenu
isFull={isFullHeader}
visibleFilter={visibleFilter}
toggleFilter={toggleFilter}
toggleCart={toggleCart}
openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} />
<HeaderSubMenu />
</div>
</header>
<HeaderSubMenuMobile /> <HeaderSubMenuMobile />
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} /> <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} /> <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />

1
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
View File

@@ -7,6 +7,7 @@
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
color: var(--white); color: var(--white);
margin-bottom: 1.6rem;
.menu { .menu {
@apply flex items-center list-none; @apply flex items-center list-none;
padding: 0.8rem 0; padding: 0.8rem 0;

99
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@@ -1,37 +1,82 @@
@import "../../../../../styles/utilities"; @import "../../../../../styles/utilities";
.headerMenu { .headerMenu {
padding-top: 1.6rem; @apply hidden;
padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
@screen md { &.full {
@apply flex justify-between items-center; @apply flex;
padding-top: 0.8rem; padding-top: 1.6rem;
padding-bottom: 0.8rem; @screen md {
&.full { padding-top: 0.8rem;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
} }
} }
&.small {
@apply flex;
.left {
.top {
display: none;
@screen md {
display: flex;
}
}
}
}
@screen md {
@apply flex justify-between items-center;
}
.left { .left {
// margin-bottom: 3.2rem;
flex: 1;
.top { .top {
@apply flex justify-between items-center; @apply flex justify-between items-center;
.iconGroup{ margin-bottom: 2rem;
@screen md {
margin-bottom: 0;
}
.iconGroup {
@apply flex justify-between items-center; @apply flex justify-between items-center;
} }
.iconCart { .iconCart {
margin-left: 1.6rem; margin-left: 1.6rem;
} }
.iconFilter{ .iconFilter {
@apply relative;
.dot {
@apply absolute;
top: -0.08rem;
right: -0.2rem;
background-color: var(--negative);
width: 1.2rem;
height: 1.2rem;
border-radius: 1.2rem;
@apply hidden;
&.isShow {
@apply block;
}
}
@screen md { @screen md {
display: none; display: none;
} }
} }
} }
.inputSearch { .searchWrap {
margin-top: 2.4rem; @apply flex items-center;
.inputSearch {
flex: 1;
}
.buttonSearch {
margin-left: 1rem;
}
@screen md {
margin: 0 1.6rem 0 4.8rem;
}
@screen lg { @screen lg {
min-width: 51.2rem; min-width: 51.2rem;
max-width: 50%; max-width: 50%;
.buttonSearch {
@apply hidden;
}
} }
} }
@screen md { @screen md {
@@ -41,9 +86,18 @@
@apply hidden; @apply hidden;
} }
} }
.inputSearch { }
margin-left: 4.8rem; }
margin-top: 0; .btnCart {
all: unset;
cursor: pointer;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);
opacity: 0.8;
} }
} }
} }
@@ -70,24 +124,11 @@
} }
} }
} }
.btnCart {
all: unset;
cursor: pointer;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);
opacity: 0.8;
}
}
}
} }
} }
@screen xl { @screen xl {
.iconFilterDesk { .iconFilterDesk {
display:none; display: none;
} }
} }
} }

50
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -1,26 +1,30 @@
import classNames from 'classnames' import classNames from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router'
import { memo, useMemo } from 'react' import { memo, useMemo } from 'react'
import { ButtonCommon } from 'src/components/common'
import InputSearch from 'src/components/common/InputSearch/InputSearch' import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import Logo from '../../../Logo/Logo' import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss' import s from './HeaderMenu.module.scss'
import { useRouter } from 'next/router'
interface Props { interface Props {
children?: any, children?: any,
isFull: boolean, isFull?: boolean,
isStickyHeader?: boolean,
visibleFilter?: boolean,
openModalAuthen: () => void, openModalAuthen: () => void,
openModalInfo: () => void, openModalInfo: () => void,
toggleFilter:() => void, toggleFilter: () => void,
toggleCart:() => void, toggleCart: () => void,
} }
const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const router = useRouter() const router = useRouter()
const optionMenu = useMemo(() => [ const optionMenu = useMemo(() => [
{ {
onClick: openModalAuthen, onClick: openModalAuthen,
@@ -30,6 +34,18 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
onClick: openModalInfo, onClick: openModalInfo,
name: 'Create User Info (Demo)', name: 'Create User Info (Demo)',
}, },
{
link: '/account-not-login',
name: 'Account Not Login (Demo)',
},
{
link: '/demo',
name: 'Notifications Empty (Demo)',
},
{
link: ROUTE.NOTIFICATION,
name: 'Notifications',
},
{ {
link: ROUTE.ACCOUNT, link: ROUTE.ACCOUNT,
name: 'Account', name: 'Account',
@@ -41,26 +57,36 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
], [openModalAuthen]) ], [openModalAuthen])
return ( return (
<section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}> <section className={classNames({
[s.headerMenu]: true,
[s.small]: isStickyHeader,
[s.full]: isFull,
})}>
<div className={s.left}> <div className={s.left}>
<div className={s.top}> <div className={s.top}>
<Logo/> <Logo />
<div className={s.iconGroup}> <div className={s.iconGroup}>
{ {
FILTER_PAGE.includes(router.pathname) && ( FILTER_PAGE.includes(router.pathname) && (
<button className={s.iconFilter} onClick={toggleFilter}> <button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter/> <IconFilter />
<div className={classNames({ [s.dot]: true, [s.isShow]: visibleFilter })}></div>
</button> </button>
) )
} }
<button className={s.iconCart}> <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCart}>
<IconBuy /> <IconBuy />
</button> </button>
</div> </div>
</div> </div>
<div className={s.inputSearch}> <div className={s.searchWrap}>
<InputSearch /> <div className={s.inputSearch}>
<InputSearch />
</div>
<div className={s.buttonSearch}>
<ButtonCommon>Search</ButtonCommon>
</div>
</div> </div>
</div> </div>
<ul className={s.menu}> <ul className={s.menu}>

1
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
View File

@@ -5,6 +5,7 @@
@screen md { @screen md {
@apply block; @apply block;
padding-bottom: 2.4rem; padding-bottom: 2.4rem;
margin-top: 1.6rem;
transform: none; transform: none;
height: unset; height: unset;
@screen lg { @screen lg {

12
src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss
View File

@@ -4,30 +4,32 @@
@apply fixed w-full bg-white; @apply fixed w-full bg-white;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 2rem 1rem; padding: 0 1rem 1rem;
border-top: 1px solid var(--border-line); border-top: 1px solid var(--border-line);
box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2); box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2);
z-index: 9999; z-index: 9999;
.menu { .menu {
@apply grid grid-cols-4; @apply grid grid-cols-5;
li { li {
a { a {
@apply transition-all duration-200 no-underline; @apply transition-all duration-200 no-underline;
&:hover { -webkit-tap-highlight-color: unset;
color: var(--primary);
}
} }
.menuItem { .menuItem {
@apply flex flex-col justify-center items-center sm-label; @apply flex flex-col justify-center items-center sm-label;
padding-top: 1rem;
border-top: 2px solid transparent;
.icon { .icon {
position: relative; position: relative;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
height: 3rem;
svg path { svg path {
fill: currentColor; fill: currentColor;
} }
} }
&.active { &.active {
@apply text-primary; @apply text-primary;
border-top: 2px solid var(--primary);
} }
&.dot { &.dot {
.icon { .icon {

9
src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
View File

@@ -2,7 +2,7 @@ import classNames from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { memo } from 'react' import { memo } from 'react'
import { IconHeart, IconHome, IconShopping, IconUser } from 'src/components/icons' import { IconHeart, IconHome, IconNoti, IconShopping, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import s from './HeaderSubMenuMobile.module.scss' import s from './HeaderSubMenuMobile.module.scss'
@@ -11,7 +11,6 @@ const OPTION_MENU = [
link: ROUTE.HOME, link: ROUTE.HOME,
name: 'Home', name: 'Home',
icon: <IconHome />, icon: <IconHome />,
isMarked: true,
}, },
{ {
link: ROUTE.PRODUCTS, link: ROUTE.PRODUCTS,
@@ -25,6 +24,12 @@ const OPTION_MENU = [
icon: <IconHeart />, icon: <IconHeart />,
isMarked: false, isMarked: false,
}, },
{
link: ROUTE.NOTIFICATION,
name: 'Notifications',
icon: <IconNoti />,
isMarked: true,
},
{ {
link: ROUTE.ACCOUNT, link: ROUTE.ACCOUNT,
name: 'Account', name: 'Account',

5
src/components/common/ImgWithLink/ImgWithLink.tsx
View File

@@ -6,16 +6,17 @@ import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
export interface ImgWithLinkProps { export interface ImgWithLinkProps {
src: string, src: string,
alt?: string, alt?: string,
blurDataURL?: string,
} }
const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
return ( return (
<div className={s.imgWithLink}> <div className={s.imgWithLink}>
<Image src={src} alt={alt} <Image src={src} alt={alt}
layout="fill" layout="fill"
className={s.imgWithLink} className={s.imgWithLink}
placeholder="blur" placeholder="blur"
blurDataURL={BLUR_DATA_IMG} blurDataURL={blurDataURL}
/> />
</div> </div>
) )

48
src/components/common/InputCommon/InputCommon.module.scss
View File

@@ -15,10 +15,11 @@
.icon + .inputCommon { .icon + .inputCommon {
padding-left: 4.8rem; padding-left: 4.8rem;
} }
.inputCommon { .inputCommon {
@apply block w-full transition-all duration-200 rounded bg-white; @apply block w-full transition-all duration-200 bg-white;
padding: 1.2rem 1.6rem; border-radius: .8rem;
padding: 1.6rem;
border: 1px solid var(--border-line); border: 1px solid var(--border-line);
&:hover, &:hover,
&:focus, &:focus,
@@ -31,24 +32,6 @@
&::placeholder { &::placeholder {
@apply text-label; @apply text-label;
} }
&.custom {
@apply custom-border-radius;
border: 1px solid transparent;
background: var(--gray);
&:hover,
&:focus,
&:active {
border: 1px solid var(--primary);
}
}
&.bgTransparent {
background: rgb(227, 242, 233, 0.3);
color: var(--white);
&::placeholder {
color: var(--white);
}
}
} }
&.preserve { &.preserve {
@@ -91,4 +74,27 @@
color: var(--negative); color: var(--negative);
margin-top: 0.4rem; margin-top: 0.4rem;
} }
&.custom {
@apply shape-common;
.inputCommon {
border: none;
background: var(--background-gray);
&:hover,
&:focus,
&:active {
@apply shadow-md;
border: none;
}
}
}
&.bgTransparent {
.inputCommon {
background: rgb(227, 242, 233, 0.3);
color: var(--white);
&::placeholder {
color: var(--white);
}
}
}
} }

15
src/components/common/InputCommon/InputCommon.tsx
View File

@@ -1,12 +1,12 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'; import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
import { IconCheck, IconError, IconPassword, IconPasswordCross } from 'src/components/icons'; import { IconCheck, IconError } from 'src/components/icons';
import { KEY } from 'src/utils/constanst.utils'; import { KEY } from 'src/utils/constanst.utils';
import s from './InputCommon.module.scss'; import s from './InputCommon.module.scss';
type Ref = { type Ref = {
focus: () => void focus: () => void
getValue: () => string | number getValue: () => string | number
} | null; } | null;
interface Props { interface Props {
children?: React.ReactNode, children?: React.ReactNode,
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
return ( return (
<div className={classNames({ <div className={classNames({
[s.inputWrap]: true, [s.inputWrap]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}> })}>
<div className={classNames({ <div className={classNames({
[s.inputInner]: true, [s.inputInner]: true,
@@ -78,11 +81,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
placeholder={placeholder} placeholder={placeholder}
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
className={classNames({ className={s.inputCommon}
[s.inputCommon]: true,
[s[styleType]]: true,
[s.bgTransparent]: backgroundTransparent
})}
/> />
</div> </div>
{ {

3
src/components/common/Layout/Layout.module.scss
View File

@@ -4,6 +4,9 @@
min-height: 100vh; min-height: 100vh;
> main { > main {
flex: 1; flex: 1;
width: 100%;
max-width: min( 100%, 1536px);
margin: auto;
} }
} }
.filter{ .filter{

24
src/components/common/Layout/Layout.tsx
View File

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import { FC } from 'react' import { FC } from 'react'
import { useModalCommon } from 'src/components/hooks' import { useModalCommon } from 'src/components/hooks'
import { BRAND, CATEGORY, FEATURED, FILTER_PAGE } from 'src/utils/constanst.utils' import { BRAND, CATEGORY, FEATURED, FILTER_PAGE } from 'src/utils/constanst.utils'
import { CustomShapeSvg } from '..' import { ScrollToTop } from '..'
import Footer from '../Footer/Footer' import Footer from '../Footer/Footer'
import Header from '../Header/Header' import Header from '../Header/Header'
import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList' import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@@ -18,7 +18,7 @@ interface Props {
const Layout: FC<Props> = ({ children }) => { const Layout: FC<Props> = ({ children }) => {
const { locale = 'en-US', pathname } = useRouter() const { locale = 'en-US', pathname } = useRouter()
const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false }) const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
const toggleFilter = () => { const toggleFilter = () => {
if (visibleFilter) { if (visibleFilter) {
closeFilter() closeFilter()
@@ -28,16 +28,16 @@ const Layout: FC<Props> = ({ children }) => {
} }
return ( return (
<CommerceProvider locale={locale}> <CommerceProvider locale={locale}>
<div className={s.mainLayout}> <div className={s.mainLayout}>
<Header toggleFilter={toggleFilter}/> <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
<main >{children}</main> <main >{children}</main>
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<CustomShapeSvg/> <ScrollToTop visibilityHeight={1500} />
{ {
FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>) FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>)
} }
<Footer /> <Footer />
</div> </div>
</CommerceProvider> </CommerceProvider>
) )

26
src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
View File

@@ -3,9 +3,14 @@
.listProductWithInfo { .listProductWithInfo {
background-color: var(--background); background-color: var(--background);
border-top: 1rem solid var(--gray); border-top: 1rem solid var(--gray);
border-bottom: 1rem solid var(--gray);
padding-top: 6rem; padding-top: 6rem;
padding-bottom: 6rem; padding-bottom: 6rem;
&.borderBottom {
border-bottom: 1rem solid var(--gray);
@screen lg {
border-bottom: none;
}
}
@screen lg { @screen lg {
@apply flex spacing-horizontal-left; @apply flex spacing-horizontal-left;
padding-top: 5.6rem; padding-top: 5.6rem;
@@ -17,8 +22,11 @@
@apply spacing-horizontal-left; @apply spacing-horizontal-left;
@screen lg { @screen lg {
max-width: 75%; max-width: 75%;
@apply custom-border-radius-lg bg-white; padding: 0 0.8rem;
padding: 4rem .8rem; > div > div {
@apply shape-common-lg bg-white;
padding: 4rem 0;
}
:global(.customArrow) { :global(.customArrow) {
@screen lg { @screen lg {
&:global(.leftArrow) { &:global(.leftArrow) {
@@ -31,18 +39,8 @@
} }
} }
@screen xl { @screen xl {
padding: 4rem 2.4rem; padding: 0 2.4rem;
max-width: 80%; max-width: 80%;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 1rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 1rem);
}
}
}
} }
} }
} }

21
src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
View File

@@ -1,3 +1,4 @@
import classNames from 'classnames';
import { TOptionsEvents } from 'keen-slider'; import { TOptionsEvents } from 'keen-slider';
import React from 'react'; import React from 'react';
import CarouselCommon from '../CarouselCommon/CarouselCommon'; import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -9,6 +10,7 @@ interface Props {
data: ProductCardProps[], data: ProductCardProps[],
title: string, title: string,
subtitle?: string, subtitle?: string,
hasBorderBottomMobile?: boolean,
} }
const OPTION_DEFAULT: TOptionsEvents = { const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2, slidesPerView: 2,
@@ -18,20 +20,29 @@ const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 3, slidesPerView: 3,
}, },
'(min-width: 768px)': { '(min-width: 768px)': {
slidesPerView: 4,
},
'(min-width: 1024px)': {
slidesPerView: 3, slidesPerView: 3,
}, },
'(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1280px)': { '(min-width: 1280px)': {
slidesPerView: 3.5,
},
'(min-width: 1440px)': {
slidesPerView: 4.5, slidesPerView: 4.5,
}, },
}, },
} }
const ListProductWithInfo = ({ data, title, subtitle }: Props) => { const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
return ( return (
<div className={s.listProductWithInfo}> <div className={classNames({
[s.listProductWithInfo]: true,
[s.borderBottom]: hasBorderBottomMobile,
})}>
<InfoProducts <InfoProducts
title={title} title={title}
subtitle={subtitle} subtitle={subtitle}

24
src/components/common/LoadingCommon/LoadingCommon.module.scss Normal file
View File

@@ -0,0 +1,24 @@
@import '../../../styles/utilities';
.wrapper {
@apply text-center;
.loadingCommon {
@apply bg-white;
height: 7rem;
width: 7rem;
animation: spin 2s linear infinite;
margin: auto;
background: url('./assets/carrot.png') top 50% left 50% no-repeat;
}
.text {
@apply font-bold;
color: var(--primary);
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

15
src/components/common/LoadingCommon/LoadingCommon.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import s from './LoadingCommon.module.scss'
const LoadingCommon = () => {
return (
<div className={s.wrapper}>
<div className={s.loadingCommon}>
</div>
<p className={s.text}>Loading...</p>
</div>
)
}
export default LoadingCommon

BIN
src/components/common/LoadingCommon/assets/carrot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
src/components/common/MenuDropdown/MenuDropdown.module.scss
View File

@@ -71,7 +71,8 @@
@apply block shadow-md; @apply block shadow-md;
} }
.menuIner { .menuIner {
@apply rounded list-none bg-white; @apply list-none bg-white;
border-radius: 0.8rem;
border: 1px solid var(--text-active); border: 1px solid var(--text-active);
margin-top: 0.4rem; margin-top: 0.4rem;
> li { > li {

4
src/components/common/MenuNavigation/MenuNavigation.module.scss
View File

@@ -1,5 +1,9 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.menuNavigationWrapper{ .menuNavigationWrapper{
@apply hidden;
@screen md {
@apply block;
}
.menuNavigationHeading{ .menuNavigationHeading{
@screen md { @screen md {
@apply sub-headline font-bold ; @apply sub-headline font-bold ;

14
src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
View File

@@ -10,8 +10,6 @@
} }
.menuNavigationProductListMobile{ .menuNavigationProductListMobile{
@apply relative transition-all duration-100; @apply relative transition-all duration-100;
&.isShow{ &.isShow{
&::after{ &::after{
content: ""; content: "";
@@ -39,13 +37,14 @@
transform: translateY(0%) transform: translateY(0%)
} }
.content{ .content{
@apply relative w-full h-full; @apply absolute w-full h-full;
margin-top: 3rem; margin-top: 3rem;
padding-top: 8rem ; padding-top: 10rem ;
padding-bottom: 10rem; padding-bottom: 10rem;
background-color: white; background-color: white;
overflow-y: auto; overflow-y: auto;
height: 100vh; height: 96%;
bottom: 0;
border-radius: 2.4rem 2.4rem 0 0; border-radius: 2.4rem 2.4rem 0 0;
.head{ .head{
@apply flex justify-between fixed; @apply flex justify-between fixed;
@@ -53,7 +52,7 @@
left:0; left:0;
margin-top: 3rem; margin-top: 3rem;
border-radius: 2.4rem 2.4rem 0 0; border-radius: 2.4rem 2.4rem 0 0;
padding: 3rem 2rem 1rem 2rem; padding: 4rem 2rem 2rem 2rem;
width: 100%; width: 100%;
background-color: white; background-color: white;
z-index: 10000; z-index: 10000;
@@ -68,7 +67,8 @@
left:0; left:0;
width: 100%; width: 100%;
background-color: white; background-color: white;
padding: 0 1rem 2rem 1rem; padding: 0 1rem 3rem 1rem;
} }
button{ button{
margin-top: 2rem; margin-top: 2rem;

4
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
View File

@@ -9,7 +9,7 @@
margin: 0.8rem 0; margin: 0.8rem 0;
} }
.menuSortList{ .menuSortList{
margin-bottom: 2rem; padding-bottom: 1rem;
box-sizing: border-box; box-sizing: border-box;
li{ li{
@@ -22,7 +22,7 @@
&.active { &.active {
@apply font-bold relative; @apply font-bold relative;
color:var(--text-active); color:var(--text-active);
background-color: var(--primary-lightest); background-color: var(--gray);
&::after{ &::after{
@apply absolute; @apply absolute;
content:""; content:"";

13
src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
View File

@@ -1,5 +1,5 @@
import classNames from 'classnames' import classNames from 'classnames'
import React, { useState } from 'react' import React, { useEffect, useState } from 'react'
import ModalCommon from '../ModalCommon/ModalCommon' import ModalCommon from '../ModalCommon/ModalCommon'
import FormLogin from './components/FormLogin/FormLogin' import FormLogin from './components/FormLogin/FormLogin'
import FormRegister from './components/FormRegister/FormRegister' import FormRegister from './components/FormRegister/FormRegister'
@@ -8,11 +8,20 @@ import s from './ModalAuthenticate.module.scss'
interface Props { interface Props {
visible: boolean, visible: boolean,
closeModal: () => void, closeModal: () => void,
mode?: '' | 'register'
} }
const ModalAuthenticate = ({ visible, closeModal }: Props) => { const ModalAuthenticate = ({ visible, mode, closeModal }: Props) => {
const [isLogin, setIsLogin] = useState<boolean>(true) const [isLogin, setIsLogin] = useState<boolean>(true)
useEffect(() => {
if (mode === 'register') {
setIsLogin(false)
} else {
setIsLogin(true)
}
}, [mode])
const onSwitch = () => { const onSwitch = () => {
setIsLogin(!isLogin) setIsLogin(!isLogin)
} }

9
src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
View File

@@ -1,9 +1,7 @@
import classNames from 'classnames';
import Link from 'next/link';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { useModalCommon } from 'src/components/hooks/useModalCommon'; import { STATE_OPTIONS } from 'src/utils/constanst.utils';
import { CustomInputCommon } from 'src/utils/type.utils'; import { CustomInputCommon } from 'src/utils/type.utils';
import { Inputcommon } from '..'; import { Inputcommon, SelectCommon } from '..';
import ButtonCommon from '../ButtonCommon/ButtonCommon'; import ButtonCommon from '../ButtonCommon/ButtonCommon';
import ModalCommon from '../ModalCommon/ModalCommon'; import ModalCommon from '../ModalCommon/ModalCommon';
import s from './ModalCreateUserInfo.module.scss'; import s from './ModalCreateUserInfo.module.scss';
@@ -27,8 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
<Inputcommon placeholder='Street Address' ref={firstInputRef} /> <Inputcommon placeholder='Street Address' ref={firstInputRef} />
<Inputcommon placeholder='City' /> <Inputcommon placeholder='City' />
<div className={s.line}> <div className={s.line}>
{/* todo: select, not input */} <SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
<Inputcommon placeholder='State' />
<Inputcommon placeholder='Zip code' /> <Inputcommon placeholder='Zip code' />
</div> </div>
<Inputcommon placeholder='Phone (delivery contact)' /> <Inputcommon placeholder='Phone (delivery contact)' />

58
src/components/common/ProductCard/ProductCard.module.scss
View File

@@ -1,5 +1,5 @@
.productCardWarpper{ .productCardWarpper {
max-width: 20.8rem; max-width: 22.4rem;
min-height: 31.8rem; min-height: 31.8rem;
padding: 1.2rem 1.2rem 0 1.2rem; padding: 1.2rem 1.2rem 0 1.2rem;
margin: auto; margin: auto;
@@ -11,47 +11,53 @@
&.notSell { &.notSell {
@apply justify-center; @apply justify-center;
} }
.cardTop{ .cardTop {
@apply relative; @apply relative;
height: 13.8rem; height: 13.8rem;
width: 100%; width: 100%;
.productImage{ .productImage {
height: 100%; height: 100%;
width: 100%; width: 100%;
@apply flex justify-center items-center; @apply flex justify-center items-center;
img{ > div {
min-height: 13rem;
img {
object-fit: contain;
}
}
img {
@apply inline; @apply inline;
} }
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.productLabel{ .productLabel {
@apply absolute left-0 bottom-0; @apply absolute left-0 bottom-0;
} }
} }
.cardMid{ .cardMid {
min-height: 10.4rem; min-height: 10.4rem;
@apply flex flex-col justify-between; @apply flex flex-col justify-between;
.cardMidTop{ .cardMidTop {
.productname{ .productname {
font-weight: bold; font-weight: bold;
color: var(--text-active); color: var(--text-active);
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.productWeight{ .productWeight {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 2rem; line-height: 2rem;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: var(--text-base); color: var(--text-base);
} }
} }
.cardMidBot{ .cardMidBot {
padding-top: 0.8rem; padding-top: 0.8rem;
@apply flex justify-between items-center border-t border-solid border-line; @apply flex justify-between items-center border-t border-solid border-line;
.productPrice{ .productPrice {
@apply font-bold; @apply font-bold;
font-size: 2rem; font-size: 2rem;
line-height: 2.8rem; line-height: 2.8rem;
@@ -59,11 +65,27 @@
} }
} }
} }
.cardBot{ .cardBot {
@apply flex justify-between items-center;
min-height: 4rem; min-height: 4rem;
@apply flex justify-between items-center; margin-top: 1.6rem;
.cardIcon{ .cardIcon {
margin-right: 0.8rem; margin-right: 0.8rem;
} }
.cardButton {
width: 100%;
button {
width: 100%;
> div {
span {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
}
}
}
}
} }
} }

28
src/components/common/ProductCard/ProductCard.tsx
View File

@@ -1,7 +1,9 @@
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import { IconBuy } from 'src/components/icons'
import { ROUTE } from 'src/utils/constanst.utils' import { ROUTE } from 'src/utils/constanst.utils'
import { ProductProps } from 'src/utils/types.utils' import { ProductProps } from 'src/utils/types.utils'
import { ImgWithLink } from '..'
import ButtonCommon from '../ButtonCommon/ButtonCommon' import ButtonCommon from '../ButtonCommon/ButtonCommon'
import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
import ItemWishList from '../ItemWishList/ItemWishList' import ItemWishList from '../ItemWishList/ItemWishList'
@@ -11,6 +13,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
export interface ProductCardProps extends ProductProps { export interface ProductCardProps extends ProductProps {
buttonText?: string buttonText?: string
isSingleButton?: boolean,
} }
const ProductCard = ({ const ProductCard = ({
@@ -21,6 +24,7 @@ const ProductCard = ({
buttonText = 'Buy Now', buttonText = 'Buy Now',
imageSrc, imageSrc,
isNotSell, isNotSell,
isSingleButton,
}: ProductCardProps) => { }: ProductCardProps) => {
if (isNotSell) { if (isNotSell) {
return <div className={`${s.productCardWarpper} ${s.notSell}`}> return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -34,7 +38,7 @@ const ProductCard = ({
<div className={s.cardTop}> <div className={s.cardTop}>
<Link href={`${ROUTE.PRODUCT_DETAIL}/test`}> <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
<div className={s.productImage}> <div className={s.productImage}>
<img src={imageSrc} alt="image" /> <ImgWithLink src={imageSrc} alt={name}/>
</div> </div>
</Link> </Link>
<div className={s.productLabel}> <div className={s.productLabel}>
@@ -56,12 +60,22 @@ const ProductCard = ({
</div> </div>
</div> </div>
<div className={s.cardBot}> <div className={s.cardBot}>
<div className={s.cardIcon}> {
<ButtonIconBuy /> isSingleButton ?
</div> <div className={s.cardButton}>
<div className={s.cardButton}> <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
<ButtonCommon type="light">{buttonText}</ButtonCommon> </div>
</div> :
<>
<div className={s.cardIcon}>
<ButtonIconBuy />
</div>
<div className={s.cardButton}>
<ButtonCommon type="light">{buttonText}</ButtonCommon>
</div>
</>
}
</div> </div>
</div> </div>
) )

10
src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
View File

@@ -1,8 +1,12 @@
@import "../../../../styles/utilities"; @import "../../../../styles/utilities";
.imgWrap { .imgWrap {
img { > div {
opacity: 0.5; min-height: 13rem;
img {
opacity: 0.5;
object-fit: contain
}
} }
} }
@@ -11,7 +15,7 @@
} }
.info { .info {
@apply flex justify-center items-center custom-border-radius bg-info-light text-center; @apply flex justify-center items-center shape-common bg-info-light text-center;
padding: .8rem 1.6rem; padding: .8rem 1.6rem;
margin-top: 1.6rem; margin-top: 1.6rem;
color: var(--info); color: var(--info);

16
src/components/common/ProductCarousel/ProductCarousel.tsx
View File

@@ -7,9 +7,9 @@ import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
import s from "./ProductCarousel.module.scss" import s from "./ProductCarousel.module.scss"
interface ProductCarouselProps interface ProductCarouselProps
extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> { extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
option?:TOptionsEvents option?: TOptionsEvents
} }
const OPTION_DEFAULT: TOptionsEvents = { const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2, slidesPerView: 2,
@@ -19,11 +19,15 @@ const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 3, slidesPerView: 3,
}, },
'(min-width: 768px)': { '(min-width: 768px)': {
slidesPerView: 4, slidesPerView: 3,
}, },
'(min-width: 1024px)': { '(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1280px)': {
slidesPerView: 4.5, slidesPerView: 4.5,
},'(min-width: 1280px)': { },
'(min-width: 1440px)': {
slidesPerView: 5.5, slidesPerView: 5.5,
}, },
}, },

21
src/components/common/RecipeCard/RecipeCard.tsx
View File

@@ -1,19 +1,24 @@
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils'
import { RecipeProps } from 'src/utils/types.utils' import { RecipeProps } from 'src/utils/types.utils'
import s from './RecipeCard.module.scss' import s from './RecipeCard.module.scss'
export interface RecipeCardProps extends RecipeProps {} export interface RecipeCardProps extends RecipeProps { }
const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => { const RecipeCard = ({ imageSrc, title, description, slug }: RecipeCardProps) => {
return ( return (
<div className={s.recipeCardWarpper}> <div className={s.recipeCardWarpper}>
<Link href="#"> <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
<div className={s.image}> <a>
<img src={imageSrc} alt="image recipe" /> <div className={s.image}>
</div> <img src={imageSrc} alt="image recipe" />
</div>
</a>
</Link> </Link>
<Link href="#"> <Link href={`${ROUTE.RECIPE_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>

27
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
View File

@@ -2,13 +2,16 @@
.recipeDetailInfo { .recipeDetailInfo {
@apply spacing-horizontal; @apply spacing-horizontal;
margin: 5.6rem auto; margin: 0 auto 5.6rem;
@screen md { @screen md {
@apply flex; @apply flex;
margin: 5.6rem auto;
} }
.img { .img {
width: fit-content; width: 100%;
margin-top: 0; margin-top: 0;
min-height: 50rem;
@screen sm-only { @screen sm-only {
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -16,13 +19,16 @@
@screen lg { @screen lg {
max-width: 60rem; max-width: 60rem;
} }
img { > div {
@apply w-full; min-height: 64rem;
object-fit: contain; img {
max-height: 64rem; // object-fit: contain;
border-radius: 2.4rem; // @apply w-full;
@screen md { min-height: 64rem;
max-height: 90rem; border-radius: 2.4rem;
// @screen md {
// max-height: 90rem;
// }
} }
} }
} }
@@ -55,6 +61,9 @@
list-style: disc; list-style: disc;
margin-left: 2rem; margin-left: 2rem;
} }
a {
color: var(--info);
}
} }
} }
} }

3
src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import { ImgWithLink } from 'src/components/common'
import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo' import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
import s from './RecipeDetailInfo.module.scss' import s from './RecipeDetailInfo.module.scss'
@@ -12,7 +13,7 @@ const RecipeDetailInfo = ({ }: Props) => {
return ( return (
<section className={s.recipeDetailInfo}> <section className={s.recipeDetailInfo}>
<div className={s.img}> <div className={s.img}>
<img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" /> <ImgWithLink src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
</div> </div>
<div className={s.recipeInfo}> <div className={s.recipeInfo}>
<div className={s.top}> <div className={s.top}>

2
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss → src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
View File

@@ -1,4 +1,4 @@
@import "../../../../styles/utilities"; @import "../../../styles/utilities";
.recommendedRecipes { .recommendedRecipes {
margin: 6rem auto; margin: 6rem auto;

0
src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx → src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
View File

15
src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
View File

@@ -1,6 +1,3 @@
import image15 from '../../../../public/assets/images/image15.png'
import image16 from '../../../../public/assets/images/image16.png'
import image17 from '../../../../public/assets/images/image17.png'
import classNames from 'classnames' 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'
@@ -22,32 +19,32 @@ 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', 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: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
},{ },{
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', 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: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
},{ },{
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', 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: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
},{ },{
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', 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: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
},{ },{
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', 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: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
},{ },{
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', 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: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
}] }]
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => { const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {

16
src/components/common/ScrollToTop/ScrollToTop.module.scss
View File

@@ -1,24 +1,24 @@
@import '../../../styles/utilities'; @import "../../../styles/utilities";
.scrollToTop { .scrollToTop {
@apply hidden; @apply hidden;
z-index: 9999;
@screen md { @screen md {
&.show { &.show {
@apply block rounded-lg fixed cursor-pointer; @apply block rounded-lg fixed cursor-pointer;
right: 11.2rem; right: 6.4rem;
bottom: 21.6rem; bottom: 10.6rem;
width: 6.4rem; width: 6.4rem;
height: 6.4rem; height: 6.4rem;
background-color: var(--border-line); background-color: var(--border-line);
} @screen lg {
right: 11.2rem;
&.hide { }
@apply hidden;
} }
} }
.scrollToTopBtn { .scrollToTopBtn {
@apply outline-none w-full h-full; @apply outline-none w-full h-full;
} }
} }

45
src/components/common/ScrollToTop/ScrollToTop.tsx
View File

@@ -1,47 +1,44 @@
import React, { useState, useEffect, MutableRefObject } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import React, { useEffect, useState } from 'react'
import ArrowUp from '../../icons/IconArrowUp'
import s from './ScrollToTop.module.scss' import s from './ScrollToTop.module.scss'
import ArrowUp from '../../icons/IconArrowUp'
interface ScrollToTopProps { interface ScrollToTopProps {
visibilityHeight?: number; visibilityHeight?: number;
} }
const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => { const ScrollToTop = ({ visibilityHeight = 450 }: ScrollToTopProps) => {
const [showScrollToTop, setShowScrollToTop] = useState<boolean>();
const [scrollPosition, setSrollPosition] = useState(0);
const [showScrollToTop, setShowScrollToTop] = useState("hide");
function handleVisibleButton() { function handleVisibleButton() {
const position = window.pageYOffset; const scrollPosition = window.scrollY;
setSrollPosition(position);
if (scrollPosition > visibilityHeight) { if (scrollPosition > visibilityHeight) {
return setShowScrollToTop("show") setShowScrollToTop(true)
} else if (scrollPosition < visibilityHeight) { } else {
return setShowScrollToTop("hide"); setShowScrollToTop(false)
} }
}; };
useEffect(() => {
window.addEventListener("scroll", handleVisibleButton);
return () => {
window.removeEventListener("scroll", handleVisibleButton);
}
}, []);
function handleScrollUp() { function handleScrollUp() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
function addEventScroll() {
window.addEventListener("scroll", handleVisibleButton);
}
useEffect(() => {
addEventScroll();
});
return ( return (
<div className={classNames(s.scrollToTop, { <div className={classNames(s.scrollToTop, {
[s[`${showScrollToTop}`]]: showScrollToTop [s.show]: showScrollToTop
})} })}
onClick={handleScrollUp} onClick={handleScrollUp}
> >
<button className={s.scrollToTopBtn}> <button className={s.scrollToTopBtn}>
<ArrowUp /> <ArrowUp />
</button> </button>

4
src/components/common/SelectCommon/SelectCommon.module.scss
View File

@@ -28,7 +28,7 @@
} }
&.custom { &.custom {
.selectTrigger { .selectTrigger {
@apply border-2; border-width: 1px;
border-color: var(--border-line); border-color: var(--border-line);
color: var(--text-label); color: var(--text-label);
} }
@@ -68,7 +68,7 @@
@apply border-solid border border-current; @apply border-solid border border-current;
} }
&.custom { &.custom {
@apply border-2; border-width: 1px;
border-color: var(--border-line); border-color: var(--border-line);
color: var(--text-label); color: var(--text-label);
} }

53
src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss Normal file
View File

@@ -0,0 +1,53 @@
@import '../../../../styles/utilities';
.skeletonImage {
@apply relative;
background: #DDDBDD;
&.small {
width: 10rem;
height: 10rem;
}
&.default {
width: 15rem;
height: 15rem;
}
&.large {
width: 20rem;
height: 20rem;
}
&.left {
margin-left: 0;
}
&.center {
margin: auto;
}
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0) 0,
rgba(#fff, 0.2) 20%,
rgba(#fff, 0.5) 60%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}

20
src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.tsx Normal file
View File

@@ -0,0 +1,20 @@
import classNames from "classnames";
import React from "react";
import s from './SkeletonImage.module.scss'
interface SkeletonImageProps {
align?: "left" | "center"
size?: "small" | "default" | "large"
}
const SkeletonImage = ({ align="center", size="default" }: SkeletonImageProps) => {
return (
<div className={classNames(s.skeletonImage, {
[s[size]] : size,
[s[align]] : align
})}>
</div>
)
}
export default SkeletonImage

65
src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss Normal file
View File

@@ -0,0 +1,65 @@
@import '../../../../styles/utilities';
.skeletonParagraph {
margin: 0 1.6rem;
.row {
display: inline-block;
height: 2rem;
width: 100%;
position: relative;
overflow: hidden;
background-color: #DDDBDD;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0) 0,
rgba(#fff, 0.2) 20%,
rgba(#fff, 0.5) 60%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
.lastRow {
display: inline-block;
height: 2rem;
width: 80%;
position: relative;
overflow: hidden;
background-color: #DDDBDD;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0) 0,
rgba(#fff, 0.2) 20%,
rgba(#fff, 0.5) 60%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}

23
src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import s from './SkeletonParagraph.module.scss'
interface SkeletonParagraphProps {
rows?: number // number of rows in paragraph
}
const SkeletonParagraph = ({ rows=2 }: SkeletonParagraphProps) => {
return (
<div className={s.skeletonParagraph}>
{
[...Array(rows)].map((e, i) => {
if (i === rows-1) {
return <div key={i} className={s.lastRow}></div>
}
return <div key={i} className={s.row}></div>
})
}
</div>
)
}
export default SkeletonParagraph

2
src/components/common/TabCommon/TabCommon.module.scss
View File

@@ -7,7 +7,7 @@
.tabList { .tabList {
@apply flex; @apply flex;
position: relative; position: relative;
border-bottom: 2px solid #FBFBFB; border-bottom: 2px solid #EBEBEB;
padding: 0.8rem 0; padding: 0.8rem 0;
&.center{ &.center{
margin: auto; margin: auto;

1
src/components/common/index.ts
View File

@@ -46,3 +46,4 @@ export { default as TabCommon} from './TabCommon/TabCommon'
export { default as StaticImage} from './StaticImage/StaticImage' export { default as StaticImage} from './StaticImage/StaticImage'
export { default as EmptyCommon} from './EmptyCommon/EmptyCommon' export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg' export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'

19
src/components/icons/IconBell.tsx Normal file
View File

@@ -0,0 +1,19 @@
const IconBell = ({ ...props }) => {
return (
<svg
width="129"
height="128"
viewBox="0 0 129 128"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M96.5 70.2933V53.3333C96.4923 45.7767 93.8107 38.4665 88.9299 32.6975C84.0492 26.9284 77.2843 23.0728 69.8333 21.8133V16C69.8333 14.5855 69.2714 13.229 68.2712 12.2288C67.271 11.2286 65.9145 10.6667 64.5 10.6667C63.0855 10.6667 61.729 11.2286 60.7288 12.2288C59.7286 13.229 59.1667 14.5855 59.1667 16V21.8133C51.7157 23.0728 44.9508 26.9284 40.0701 32.6975C35.1893 38.4665 32.5077 45.7767 32.5 53.3333V70.2933C29.3877 71.3937 26.692 73.4297 24.7823 76.1223C22.8727 78.8149 21.8426 82.0323 21.8333 85.3333V96C21.8333 97.4145 22.3952 98.7711 23.3954 99.7712C24.3956 100.771 25.7522 101.333 27.1667 101.333H43.9133C45.1415 105.853 47.8227 109.842 51.5432 112.687C55.2637 115.531 59.8168 117.072 64.5 117.072C69.1832 117.072 73.7363 115.531 77.4568 112.687C81.1773 109.842 83.8585 105.853 85.0867 101.333H101.833C103.248 101.333 104.604 100.771 105.605 99.7712C106.605 98.7711 107.167 97.4145 107.167 96V85.3333C107.157 82.0323 106.127 78.8149 104.218 76.1223C102.308 73.4297 99.6123 71.3937 96.5 70.2933ZM43.1667 53.3333C43.1667 47.6754 45.4143 42.2492 49.4151 38.2484C53.4158 34.2476 58.8421 32 64.5 32C70.158 32 75.5842 34.2476 79.585 38.2484C83.5857 42.2492 85.8333 47.6754 85.8333 53.3333V69.3333H43.1667V53.3333ZM64.5 106.667C62.6385 106.655 60.8124 106.157 59.2031 105.222C57.5938 104.286 56.2574 102.945 55.3267 101.333H73.6733C72.7426 102.945 71.4062 104.286 69.7969 105.222C68.1876 106.157 66.3615 106.655 64.5 106.667ZM96.5 90.6667H32.5V85.3333C32.5 83.9189 33.0619 82.5623 34.0621 81.5621C35.0623 80.5619 36.4189 80 37.8333 80H91.1667C92.5812 80 93.9377 80.5619 94.9379 81.5621C95.9381 82.5623 96.5 83.9189 96.5 85.3333V90.6667Z"
fill="#CCCCCC"
/>
</svg>
)
}
export default IconBell

25
src/components/icons/IconBill.tsx Normal file
View File

@@ -0,0 +1,25 @@
const IconBill = ({ ...props }) => {
return (
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="64"
height="64"
rx="32"
fill="#F1F8F4"
/>
<path
d="M29.0833 30.25H32C32.3094 30.25 32.6062 30.1271 32.825 29.9083C33.0437 29.6895 33.1667 29.3928 33.1667 29.0833C33.1667 28.7739 33.0437 28.4772 32.825 28.2584C32.6062 28.0396 32.3094 27.9167 32 27.9167H30.8333V27.3333C30.8333 27.0239 30.7104 26.7272 30.4916 26.5084C30.2728 26.2896 29.9761 26.1667 29.6667 26.1667C29.3572 26.1667 29.0605 26.2896 28.8417 26.5084C28.6229 26.7272 28.5 27.0239 28.5 27.3333V27.975C27.7912 28.1189 27.1611 28.5211 26.7321 29.1035C26.3031 29.6858 26.1058 30.4068 26.1785 31.1265C26.2512 31.8461 26.5887 32.5131 27.1255 32.9979C27.6623 33.4827 28.36 33.7507 29.0833 33.75H30.25C30.4047 33.75 30.5531 33.8115 30.6625 33.9209C30.7719 34.0303 30.8333 34.1786 30.8333 34.3333C30.8333 34.4881 30.7719 34.6364 30.6625 34.7458C30.5531 34.8552 30.4047 34.9167 30.25 34.9167H27.3333C27.0239 34.9167 26.7272 35.0396 26.5084 35.2584C26.2896 35.4772 26.1667 35.7739 26.1667 36.0833C26.1667 36.3928 26.2896 36.6895 26.5084 36.9083C26.7272 37.1271 27.0239 37.25 27.3333 37.25H28.5V37.8333C28.5 38.1428 28.6229 38.4395 28.8417 38.6583C29.0605 38.8771 29.3572 39 29.6667 39C29.9761 39 30.2728 38.8771 30.4916 38.6583C30.7104 38.4395 30.8333 38.1428 30.8333 37.8333V37.1917C31.5422 37.0477 32.1722 36.6456 32.6012 36.0632C33.0302 35.4808 33.2275 34.7599 33.1548 34.0402C33.0821 33.3206 32.7446 32.6536 32.2079 32.1688C31.6711 31.684 30.9733 31.4159 30.25 31.4167H29.0833C28.9286 31.4167 28.7803 31.3552 28.6709 31.2458C28.5615 31.1364 28.5 30.9881 28.5 30.8333C28.5 30.6786 28.5615 30.5303 28.6709 30.4209C28.7803 30.3115 28.9286 30.25 29.0833 30.25ZM42.5 32H39V21.5C39.0008 21.2944 38.9473 21.0923 38.8449 20.914C38.7424 20.7358 38.5947 20.5878 38.4167 20.485C38.2393 20.3826 38.0381 20.3287 37.8333 20.3287C37.6285 20.3287 37.4274 20.3826 37.25 20.485L33.75 22.4917L30.25 20.485C30.0726 20.3826 29.8715 20.3287 29.6667 20.3287C29.4619 20.3287 29.2607 20.3826 29.0833 20.485L25.5833 22.4917L22.0833 20.485C21.906 20.3826 21.7048 20.3287 21.5 20.3287C21.2952 20.3287 21.094 20.3826 20.9167 20.485C20.7386 20.5878 20.5909 20.7358 20.4885 20.914C20.386 21.0923 20.3325 21.2944 20.3333 21.5V40.1667C20.3333 41.0949 20.7021 41.9852 21.3585 42.6415C22.0148 43.2979 22.9051 43.6667 23.8333 43.6667H40.1667C41.0949 43.6667 41.9852 43.2979 42.6415 42.6415C43.2979 41.9852 43.6667 41.0949 43.6667 40.1667V33.1667C43.6667 32.8573 43.5438 32.5605 43.325 32.3417C43.1062 32.1229 42.8094 32 42.5 32ZM23.8333 41.3333C23.5239 41.3333 23.2272 41.2104 23.0084 40.9916C22.7896 40.7728 22.6667 40.4761 22.6667 40.1667V23.5183L25 24.8483C25.1801 24.9424 25.3802 24.9915 25.5833 24.9915C25.7865 24.9915 25.9866 24.9424 26.1667 24.8483L29.6667 22.8417L33.1667 24.8483C33.3467 24.9424 33.5469 24.9915 33.75 24.9915C33.9531 24.9915 34.1533 24.9424 34.3333 24.8483L36.6667 23.5183V40.1667C36.6698 40.5647 36.7408 40.9592 36.8767 41.3333H23.8333ZM41.3333 40.1667C41.3333 40.4761 41.2104 40.7728 40.9916 40.9916C40.7728 41.2104 40.4761 41.3333 40.1667 41.3333C39.8572 41.3333 39.5605 41.2104 39.3417 40.9916C39.1229 40.7728 39 40.4761 39 40.1667V34.3333H41.3333V40.1667Z"
fill="#5B9A74"
/>
</svg>
)
}
export default IconBill

11
src/components/icons/IconNoti.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const IconNoti = () => {
return (
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.0003 13.3763V9.66634C16.9986 8.01332 16.412 6.41422 15.3444 5.15224C14.2767 3.89027 12.7969 3.04684 11.167 2.77134V1.49967C11.167 1.19026 11.0441 0.893509 10.8253 0.674717C10.6065 0.455924 10.3097 0.333008 10.0003 0.333008C9.6909 0.333008 9.39416 0.455924 9.17537 0.674717C8.95657 0.893509 8.83366 1.19026 8.83366 1.49967V2.77134C7.20375 3.04684 5.72394 3.89027 4.65627 5.15224C3.58861 6.41422 3.002 8.01332 3.00033 9.66634V13.3763C2.31952 13.617 1.72982 14.0624 1.31209 14.6514C0.89435 15.2404 0.669022 15.9442 0.666992 16.6663V18.9997C0.666992 19.3091 0.789909 19.6058 1.0087 19.8246C1.22749 20.0434 1.52424 20.1663 1.83366 20.1663H5.49699C5.76566 21.1549 6.35216 22.0277 7.16602 22.6499C7.97988 23.2721 8.97587 23.6092 10.0003 23.6092C11.0248 23.6092 12.0208 23.2721 12.8346 22.6499C13.6485 22.0277 14.235 21.1549 14.5037 20.1663H18.167C18.4764 20.1663 18.7732 20.0434 18.9919 19.8246C19.2107 19.6058 19.3337 19.3091 19.3337 18.9997V16.6663C19.3316 15.9442 19.1063 15.2404 18.6886 14.6514C18.2708 14.0624 17.6811 13.617 17.0003 13.3763ZM5.33366 9.66634C5.33366 8.42866 5.82532 7.24168 6.70049 6.36651C7.57566 5.49134 8.76265 4.99967 10.0003 4.99967C11.238 4.99967 12.425 5.49134 13.3002 6.36651C14.1753 7.24168 14.667 8.42866 14.667 9.66634V13.1663H5.33366V9.66634ZM10.0003 21.333C9.59313 21.3305 9.19366 21.2216 8.84163 21.0169C8.48959 20.8122 8.19725 20.519 7.99366 20.1663H12.007C11.8034 20.519 11.5111 20.8122 11.159 21.0169C10.807 21.2216 10.4075 21.3305 10.0003 21.333ZM17.0003 17.833H3.00033V16.6663C3.00033 16.3569 3.12324 16.0602 3.34203 15.8414C3.56083 15.6226 3.85757 15.4997 4.16699 15.4997H15.8337C16.1431 15.4997 16.4398 15.6226 16.6586 15.8414C16.8774 16.0602 17.0003 16.3569 17.0003 16.6663V17.833Z" fill="#5B9A74" />
</svg>
)
}
export default IconNoti

3
src/components/icons/index.ts
View File

@@ -33,3 +33,6 @@ export { default as IconMinus } from './IconMinus'
export { default as IconCirclePlus } from './IconCirclePlus' export { default as IconCirclePlus } from './IconCirclePlus'
export { default as IconDoneCheckout } from './IconDoneCheckout' export { default as IconDoneCheckout } from './IconDoneCheckout'
export { default as IconFilter } from './IconFilter' export { default as IconFilter } from './IconFilter'
export { default as IconBell } from './IconBell'
export { default as IconBill } from './IconBill'
export { default as IconNoti } from './IconNoti'

2
src/components/modules/404/404Page/404Page.module.scss
View File

@@ -6,7 +6,7 @@
background-color: white; background-color: white;
.inner{ .inner{
height: 100vh; height: 70vh;
.logo{ .logo{
margin-top: 2rem; margin-top: 2rem;
} }

7
src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss Normal file
View File

@@ -0,0 +1,7 @@
@import "../../../../styles/utilities";
.breadCrumbWrapper {
@apply py-12 spacing-horizontal;
@screen lg {
padding-left: 3.2rem;
}
}

16
src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { BreadcrumbCommon } from "src/components/common"
import s from './NotificationBreadcrumb.module.scss'
const NOTIFICATION_DATA = [
{link: "/notifications", name: "Notifications"},
];
const NotificationBreadcrumb = () => {
return (
<section className={s.breadCrumbWrapper}>
<BreadcrumbCommon crumbs={NOTIFICATION_DATA} showHomePage={true}/>
</section>
)
}
export default NotificationBreadcrumb

17
src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss Normal file
View File

@@ -0,0 +1,17 @@
@import "../../../../styles/utilities";
.emptyPage {
@apply flex justify-center items-center flex-col;
margin-bottom: 5.4rem;
@screen lg {
margin-bottom: 12.8rem;
}
.emptyIcon {
padding-bottom: 2.6rem;
}
.emptyContent {
@apply sub-headline;
align-content: center;
color: var(--disabled);
}
}

18
src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import { IconBell } from 'src/components/icons'
import s from '../NotificationEmptyPage/NotificationEmptyPage.module.scss'
const NotificationEmptyPage = () => {
return (
<section className={s.emptyPage}>
<div className={s.emptyIcon}>
<IconBell />
</div>
<div className={s.emptyContent}>
<p>Your Notification is empty</p>
</div>
</section>
)
}
export default NotificationEmptyPage

9
src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss Normal file
View File

@@ -0,0 +1,9 @@
@import "../../../../styles/utilities";
.headingWrapper {
@apply flex spacing-horizontal-left pb-16;
.heading{
max-width: 121.6rem;
flex-grow: 1;
}
}

18
src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { HeadingCommon } from "src/components/common"
import s from './NotificationHeading.module.scss'
interface NotificationHeadingProps {
children?: React.ReactNode,
heading?: string,
}
const NotificationHeading = ({heading = "NOTIFICATIONS"}: NotificationHeadingProps) => {
return (
<section className={s.headingWrapper}>
<div className={s.heading}>
<HeadingCommon>{heading}</HeadingCommon>
</div>
</section>
)
}
export default NotificationHeading

35
src/components/modules/Notification/NotificationItem/NotificationItem.module.scss Normal file
View File

@@ -0,0 +1,35 @@
@import '../../../../styles/utilities';
.notificationItem {
@apply flex flex-row spacing-horizontal;
padding-top: 1.2rem;
&:hover{
cursor: pointer;
}
.contentWrapper {
padding-left: 1.6rem;
padding-bottom: 1.4rem;
max-width: 26.3rem;
.title {
font-weight: bold;
color: var(--text-active);
}
.date {
@apply caption;
color: #828282;
}
}
&.isChecked {
.icon {
rect {
fill: var(--gray)
}
path {
fill: var(--disabled)
}
}
.title, .content {
color: var(--text-label);
}
}
}

51
src/components/modules/Notification/NotificationItem/NotificationItem.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React, {useState} from 'react'
import s from '../NotificationItem/NotificationItem.module.scss'
import ClassNames from 'classnames'
import { IconBill } from 'src/components/icons'
import Link from 'next/link'
import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils'
export interface NotificationItemProps {
ID?: string,
title?: string,
content?: string,
date?: string,
checked?: boolean,
}
const NotificationItem = ({ ID, title, content, date, checked}: NotificationItemProps) => {
const [isChecked, setChecked] = useState(checked)
const Check = () => {
setChecked(true)
}
return (
<section className={ClassNames({
[s.notificationItem] : true,
[s.isChecked] : isChecked,
})}
onClick = {Check}
>
<div className={s.icon}>
<IconBill />
</div>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
<a>
<div className={s.contentWrapper}>
<div className={s.title}>
{title}
</div>
<div className={s.content}>
{content}
</div>
<div className={s.date}>
{date}
</div>
</div>
</a>
</Link>
</section>
)
}
export default NotificationItem

6
src/components/modules/Notification/NotificationPage/NotificationPage.module.scss Normal file
View File

@@ -0,0 +1,6 @@
.notificationPage {
padding-bottom: 5.4rem;
@screen md {
padding-bottom: 12.8rem;
}
}

56
src/components/modules/Notification/NotificationPage/NotificationPage.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react'
import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage'
import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem'
import s from './NotificationPage.module.scss'
interface NotificationPageProps {
isEmpty?: boolean,
data?: NotificationItemProps[],
}
const NOTIFICATION_DATA = [
{
ID: "ID33455",
title: "Your order ID33455",
content: "The order has been deliveried successfully!",
date: "2 days ago",
checked: false,
},
{
ID: "ID33456",
title: "Your order ID33456",
content: "The order has been deliveried successfully!",
date: "2 days ago",
checked: false,
},
{
ID: "ID33457",
title: "Your order ID33457",
content: "The order has been deliveried successfully!",
date: "2 days ago",
checked: true,
}
]
const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => {
return (
<div className={s.notificationPage}>
{
isEmpty ?
<NotificationEmptyPage />
:
<>
{
data.map(item => {
return (
<NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} checked={item.checked}/>
)
})
}
</>
}
</div>
)
}
export default NotificationPage

5
src/components/modules/Notification/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
export { default as NotificationPage } from './NotificationPage/NotificationPage'
export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage'
export { default as NotificationItem } from './NotificationItem/NotificationItem'
export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb'
export { default as NotificationHeading } from './NotificationHeading/NotificationHeading'

51
src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
View File

@@ -1,27 +1,54 @@
@import '../../../../styles/utilities'; @import '../../../../styles/utilities';
.accountNavigation { .accountNavigation {
@apply flex; @apply relative;
width: 100%; width: 100%;
@screen md {
@apply flex;
width: 100%;
}
.slider { .slider {
@apply inline-block; @apply hidden;
width: 0.2rem;
height: 4.8rem; @screen md {
border-radius: 3px; @apply inline-block;
background-color: var(--primary); width: 0.2rem;
position: absolute; height: 4.8rem;
left: 11.2rem; border-radius: 3px;
transition: all .2s linear; background-color: var(--primary);
position: absolute;
left: 0;
top: 450;
transition: all .2s linear;
}
} }
.tabList { .tabList {
margin-top: 3.8rem; @apply flex;
margin-right: 12.4rem;
@screen md {
@apply block;
margin-right: 0rem;
}
@screen lg {
@apply block;
margin-right: 4.8rem;
}
@screen xl {
@apply block;
margin-right: 12.4rem;
}
} }
.tabBody { .tabBody {
margin-top: -4.7rem;
width: 100%; width: 100%;
@screen md {
margin-top: -8.6rem;
}
} }
} }

16
src/components/modules/account/AccountNavigation/AccountNavigation.tsx
View File

@@ -1,7 +1,6 @@
import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react" import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
import s from './AccountNavigation.module.scss' import s from './AccountNavigation.module.scss'
import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
import AccountNavigationItem from './components/AccountNavigationItem'
import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane' import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
interface AccountNavigationProps { interface AccountNavigationProps {
@@ -14,6 +13,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
const sliderRef = useRef<HTMLDivElement>(null); const sliderRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLUListElement>(null) const headerRef = useRef<HTMLUListElement>(null)
useEffect(() => {
if (defaultActiveIndex !== undefined) {
setActive(defaultActiveIndex)
}
}, [defaultActiveIndex])
const onTabClick = (index: number) => { const onTabClick = (index: number) => {
setActive(index) setActive(index)
} }
@@ -21,10 +26,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
function slide(index: number) { function slide(index: number) {
const active = headerRef.current?.children.item(index)?.getBoundingClientRect() const active = headerRef.current?.children.item(index)?.getBoundingClientRect()
const header = headerRef.current?.getBoundingClientRect() const header = headerRef.current?.getBoundingClientRect()
const firstEl = headerRef.current?.children.item(0)?.getBoundingClientRect()
const current = sliderRef.current const current = sliderRef.current
if (current && active && header) { if (current && active && header && firstEl) {
const top = active.top; const firstElTop = firstEl.top
const top = active.top - firstElTop;
current.style.top = top.toString()+"px"; current.style.top = top.toString()+"px";
} }
} }
@@ -63,7 +70,6 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
}) })
} }
</div> </div>
<div ref={slider} className={s.slider}></div>
</section> </section>
) )
} }

17
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
View File

@@ -1,17 +0,0 @@
@import '../../../../../styles/utilities';
.accountNavigationItem {
width: 28rem;
padding: 1.2rem 0 1.2rem 1.6rem;
margin-bottom: 1.2rem;
&:hover {
@apply cursor-pointer;
}
&.active {
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
}
}

46
src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss Normal file
View File

@@ -0,0 +1,46 @@
@import '../../../../../../styles/utilities';
.accountNavigationItem {
width: fit-content;
padding: 1.2rem 1.6rem 1.2rem 0rem;
margin-bottom: 1.2rem;
&:hover {
@apply cursor-pointer;
}
&.active {
@apply shape-common font-bold;
background-color: var(--primary);
color: white;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
margin-right: 1.6rem;
@screen md {
@apply font-normal;
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
color: #3D3D3D;
clip-path: none;
}
}
@screen md {
max-width: 24rem;
min-width: 22rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
@screen lg {
max-width: 26rem;
min-width: 23rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
@screen xl {
max-width: 28rem;
min-width: 24rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
}

0
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx → src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.tsx
View File

2
src/components/modules/account/AccountPage/AccountPage.module.scss
View File

@@ -6,6 +6,8 @@
margin-top: -3.2rem; margin-top: -3.2rem;
padding-top: 3.2rem; padding-top: 3.2rem;
padding-bottom: 3.2rem; padding-bottom: 3.2rem;
min-height: 70rem;
@screen md { @screen md {
padding-left: 3.2rem; padding-left: 3.2rem;

Some files were not shown because too many files have changed in this diff Show More