mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into fixbug-13/9/2021-datnguyen
This commit is contained in:
commit
3fb76cb8e2
126
pages/test.tsx
126
pages/test.tsx
@ -1,59 +1,83 @@
|
||||
import { CarouselCommon, ProductCard, Layout } from 'src/components/common'
|
||||
import {
|
||||
FeaturedProductCard,
|
||||
Layout
|
||||
} from 'src/components/common';
|
||||
// import { RecipeListPage } from 'src/components/modules/recipes';
|
||||
import { useModalCommon } from 'src/components/hooks'
|
||||
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'
|
||||
import { useKeenSlider } from 'keen-slider/react'
|
||||
import { CSSProperties } from 'react'
|
||||
import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
|
||||
import ColectionCarcousel from 'src/components/modules/home/CollectionCarcousel/CollectionCarcousel'
|
||||
import { HomeCollection } from 'src/components/modules/home'
|
||||
export default function Test() {
|
||||
const {
|
||||
visible: visibleMenuFilter,
|
||||
openModal,
|
||||
closeModal: closeMenuFilter,
|
||||
} = useModalCommon({ initialValue: false })
|
||||
const toggle = () => {
|
||||
if (visibleMenuFilter) {
|
||||
closeMenuFilter()
|
||||
} else {
|
||||
openModal()
|
||||
}
|
||||
}
|
||||
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||
import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
|
||||
|
||||
const style: CSSProperties = {
|
||||
background: 'gray',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '50px',
|
||||
color: '#fff',
|
||||
fontWeight: 500,
|
||||
height: '300px',
|
||||
maxHeight: '100vh',
|
||||
const CATEGORY = [
|
||||
{
|
||||
name: 'All',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
|
||||
},
|
||||
{
|
||||
name: 'Veggie',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||
},
|
||||
{
|
||||
name: 'Seafood',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
|
||||
},
|
||||
{
|
||||
name: 'Frozen',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
|
||||
},
|
||||
{
|
||||
name: 'Coffee Bean',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
|
||||
},
|
||||
{
|
||||
name: 'Sauce',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
|
||||
},
|
||||
]
|
||||
const BRAND = [
|
||||
{
|
||||
name: 'Maggi',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||
},
|
||||
{
|
||||
name: 'Cholimes',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
|
||||
},
|
||||
{
|
||||
name: 'Chinsu',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
|
||||
}]
|
||||
|
||||
const FEATURED = [
|
||||
|
||||
{
|
||||
name: 'Best Sellers',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
|
||||
},
|
||||
{
|
||||
name: 'Sales',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
|
||||
},
|
||||
{
|
||||
name: 'New Item',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
|
||||
},
|
||||
{
|
||||
name: 'Viewed',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
|
||||
}
|
||||
const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 })
|
||||
const RESPONSIVE = {
|
||||
desktop: {
|
||||
breakpoint: { max: 3000, min: 1024 },
|
||||
items: 5.5,
|
||||
slidesToSlide: 1 // optional, default to 1.
|
||||
},
|
||||
tablet: {
|
||||
breakpoint: { max: 1024, min: 464 },
|
||||
items: 2,
|
||||
slidesToSlide: 1 // optional, default to 1.
|
||||
},
|
||||
mobile: {
|
||||
breakpoint: { max: 464, min: 0 },
|
||||
items: 1,
|
||||
slidesToSlide: 1 // optional, default to 1.
|
||||
}
|
||||
};
|
||||
];
|
||||
|
||||
|
||||
|
||||
const data = PRODUCT_DATA_TEST[0]
|
||||
export default function Test() {
|
||||
return (
|
||||
<>
|
||||
<HomeCollection />
|
||||
{/* <CarouselCommon<ProductCardProps> showDots={true} draggable={true} infinite={true} data={PRODUCT_DATA_TEST} Component={ProductCard} responsive={RESPONSIVE} itemKey="tets"/> */}
|
||||
<FeaturedProductCard
|
||||
imageSrc={data.imageSrc}
|
||||
title="Sale 25% coffee bean"
|
||||
subTitle="50 first orders within a day"
|
||||
price={data.price}
|
||||
originPrice="$20.00" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
635
report.20210916.143314.10644.0.001.json
Normal file
635
report.20210916.143314.10644.0.001.json
Normal file
@ -0,0 +1,635 @@
|
||||
|
||||
{
|
||||
"header": {
|
||||
"reportVersion": 1,
|
||||
"event": "Allocation failed - JavaScript heap out of memory",
|
||||
"trigger": "FatalError",
|
||||
"filename": "report.20210916.143314.10644.0.001.json",
|
||||
"dumpEventTime": "2021-09-16T14:33:14Z",
|
||||
"dumpEventTimeStamp": "1631777594647",
|
||||
"processId": 10644,
|
||||
"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": 4751531,
|
||||
"nice": 0,
|
||||
"sys": 2306406,
|
||||
"idle": 17286484,
|
||||
"irq": 211515
|
||||
},
|
||||
{
|
||||
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||
"speed": 2395,
|
||||
"user": 4863890,
|
||||
"nice": 0,
|
||||
"sys": 1779625,
|
||||
"idle": 17700703,
|
||||
"irq": 34734
|
||||
},
|
||||
{
|
||||
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||
"speed": 2395,
|
||||
"user": 5401078,
|
||||
"nice": 0,
|
||||
"sys": 1836687,
|
||||
"idle": 17106453,
|
||||
"irq": 23031
|
||||
},
|
||||
{
|
||||
"model": "Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz",
|
||||
"speed": 2395,
|
||||
"user": 5444765,
|
||||
"nice": 0,
|
||||
"sys": 1738531,
|
||||
"idle": 17160921,
|
||||
"irq": 17453
|
||||
}
|
||||
],
|
||||
"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:205b:1df6:f692:6c1f",
|
||||
"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": 19
|
||||
},
|
||||
{
|
||||
"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": "0x00007ff7f3851759",
|
||||
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3855b7c",
|
||||
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3854b38",
|
||||
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f394446b",
|
||||
"symbol": "v8::base::CPU::has_sse+37723"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f4148d9e",
|
||||
"symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f4130de1",
|
||||
"symbol": "v8::SharedArrayBuffer::Externalize+833"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3ffe6ac",
|
||||
"symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f4009a50",
|
||||
"symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f4006584",
|
||||
"symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3ffbe13",
|
||||
"symbol": "v8::internal::Heap::CollectGarbage+1283"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3ffa5e4",
|
||||
"symbol": "v8::internal::Heap::AddRetainedMap+2356"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f401b8b5",
|
||||
"symbol": "v8::internal::Factory::NewFillerObject+53"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f3d87b89",
|
||||
"symbol": "v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+4057"
|
||||
},
|
||||
{
|
||||
"pc": "0x00007ff7f4574d3d",
|
||||
"symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
|
||||
},
|
||||
{
|
||||
"pc": "0x000003477520dd23",
|
||||
"symbol": ""
|
||||
}
|
||||
],
|
||||
"javascriptHeap": {
|
||||
"totalMemory": 2169589760,
|
||||
"totalCommittedMemory": 2169589760,
|
||||
"usedMemory": 2052092520,
|
||||
"availableMemory": 60753408,
|
||||
"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": 1314664,
|
||||
"available": 15445144
|
||||
},
|
||||
"old_space": {
|
||||
"memorySize": 1655812096,
|
||||
"committedMemory": 1655812096,
|
||||
"capacity": 1577001080,
|
||||
"used": 1576907736,
|
||||
"available": 93344
|
||||
},
|
||||
"code_space": {
|
||||
"memorySize": 4882432,
|
||||
"committedMemory": 4882432,
|
||||
"capacity": 4069312,
|
||||
"used": 4069312,
|
||||
"available": 0
|
||||
},
|
||||
"map_space": {
|
||||
"memorySize": 8916992,
|
||||
"committedMemory": 8916992,
|
||||
"capacity": 4130000,
|
||||
"used": 4130000,
|
||||
"available": 0
|
||||
},
|
||||
"large_object_space": {
|
||||
"memorySize": 464965632,
|
||||
"committedMemory": 464965632,
|
||||
"capacity": 464541264,
|
||||
"used": 464541264,
|
||||
"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": 3438.73,
|
||||
"kernelCpuSeconds": 172.546,
|
||||
"cpuConsumptionPercent": 31.9469,
|
||||
"maxRss": 3366490112,
|
||||
"pageFaults": {
|
||||
"IORequired": 29847545,
|
||||
"IONotRequired": 0
|
||||
},
|
||||
"fsActivity": {
|
||||
"reads": 41064,
|
||||
"writes": 891846
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"APPLICATION_INSIGHTS_NO_DIAGNOSTIC_CHANNEL": "true",
|
||||
"ChocolateyInstall": "C:\\ProgramData\\chocolatey",
|
||||
"ChocolateyLastPathUpdate": "132608575831335062",
|
||||
"CHROME_CRASHPAD_PIPE_NAME": "\\\\.\\pipe\\crashpad_7556_KVXXHZZOUDSIJETD",
|
||||
"CLASSPATH": "C:\\Program Files\\Java\\jdk1.8.0_231\\bin",
|
||||
"COLORTERM": "truecolor",
|
||||
"COMMERCE_CUSTOMERAUTH_ENABLED": "true",
|
||||
"COMMERCE_PROVIDER": "vendure",
|
||||
"CommonProgramFiles": "C:\\Program Files\\Common Files",
|
||||
"CommonProgramFiles(x86)": "C:\\Program Files (x86)\\Common Files",
|
||||
"CommonProgramW6432": "C:\\Program Files\\Common Files",
|
||||
"COMPUTERNAME": "DESKTOP-TILU55O",
|
||||
"ComSpec": "C:\\WINDOWS\\system32\\cmd.exe",
|
||||
"dp0": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce\\node_modules\\.bin\\",
|
||||
"DriverData": "C:\\Windows\\System32\\Drivers\\DriverData",
|
||||
"FPS_BROWSER_APP_PROFILE_STRING": "Internet Explorer",
|
||||
"FPS_BROWSER_USER_PROFILE_STRING": "Default",
|
||||
"GIT_ASKPASS": "c:\\Users\\nhan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh",
|
||||
"GIT_LFS_PATH": "C:\\Program Files\\Git LFS",
|
||||
"HOME": "C:\\Users\\nhan",
|
||||
"HOMEDRIVE": "C:",
|
||||
"HOMEPATH": "\\Users\\nhan",
|
||||
"INIT_CWD": "G:\\hoc-fpt-2\\làm việc\\kie\\work\\grocery-vercel-commerce",
|
||||
"JAVA_HOME": "C:\\Program Files\\Java\\jdk1.8.0_281",
|
||||
"LANG": "en_US.UTF-8",
|
||||
"LOCALAPPDATA": "C:\\Users\\nhan\\AppData\\Local",
|
||||
"LOGONSERVER": "\\\\DESKTOP-TILU55O",
|
||||
"NEXT_PUBLIC_VENDURE_LOCAL_URL": "/vendure-shop-api",
|
||||
"NEXT_PUBLIC_VENDURE_SHOP_API_URL": "https://demo.vendure.io/shop-api",
|
||||
"NODE": "C:\\Program Files\\nodejs\\node.exe",
|
||||
"NODE_ENV": "development",
|
||||
"NODE_EXE": "C:\\Program Files\\nodejs\\\\node.exe",
|
||||
"NODE_OPTIONS": "'--inspect' ",
|
||||
"NPM_CLI_JS": "C:\\Program Files\\nodejs\\\\node_modules\\npm\\bin\\npm-cli.js",
|
||||
"npm_config_access": "",
|
||||
"npm_config_allow_same_version": "",
|
||||
"npm_config_also": "",
|
||||
"npm_config_always_auth": "",
|
||||
"npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"dev-windows\"],\"original\":[\"run\",\"dev-windows\"]}",
|
||||
"npm_config_audit": "true",
|
||||
"npm_config_audit_level": "low",
|
||||
"npm_config_auth_type": "legacy",
|
||||
"npm_config_before": "",
|
||||
"npm_config_bin_links": "true",
|
||||
"npm_config_browser": "",
|
||||
"npm_config_ca": "",
|
||||
"npm_config_cache": "C:\\Users\\nhan\\AppData\\Roaming\\npm-cache",
|
||||
"npm_config_cache_lock_retries": "10",
|
||||
"npm_config_cache_lock_stale": "60000",
|
||||
"npm_config_cache_lock_wait": "10000",
|
||||
"npm_config_cache_max": "Infinity",
|
||||
"npm_config_cache_min": "10",
|
||||
"npm_config_cafile": "",
|
||||
"npm_config_cert": "",
|
||||
"npm_config_cidr": "",
|
||||
"npm_config_color": "true",
|
||||
"npm_config_commit_hooks": "true",
|
||||
"npm_config_depth": "Infinity",
|
||||
"npm_config_description": "true",
|
||||
"npm_config_dev": "",
|
||||
"npm_config_dry_run": "",
|
||||
"npm_config_editor": "notepad.exe",
|
||||
"npm_config_engine_strict": "",
|
||||
"npm_config_fetch_retries": "2",
|
||||
"npm_config_fetch_retry_factor": "10",
|
||||
"npm_config_fetch_retry_maxtimeout": "60000",
|
||||
"npm_config_fetch_retry_mintimeout": "10000",
|
||||
"npm_config_force": "",
|
||||
"npm_config_format_package_lock": "true",
|
||||
"npm_config_fund": "true",
|
||||
"npm_config_git": "git",
|
||||
"npm_config_git_tag_version": "true",
|
||||
"npm_config_global": "",
|
||||
"npm_config_globalconfig": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmrc",
|
||||
"npm_config_globalignorefile": "C:\\Users\\nhan\\AppData\\Roaming\\npm\\etc\\npmignore",
|
||||
"npm_config_global_style": "",
|
||||
"npm_config_group": "",
|
||||
"npm_config_ham_it_up": "",
|
||||
"npm_config_heading": "npm",
|
||||
"npm_config_https_proxy": "",
|
||||
"npm_config_if_present": "",
|
||||
"npm_config_ignore_prepublish": "",
|
||||
"npm_config_ignore_scripts": "",
|
||||
"npm_config_init_author_email": "",
|
||||
"npm_config_init_author_name": "",
|
||||
"npm_config_init_author_url": "",
|
||||
"npm_config_init_license": "ISC",
|
||||
"npm_config_init_module": "C:\\Users\\nhan\\.npm-init.js",
|
||||
"npm_config_init_version": "1.0.0",
|
||||
"npm_config_json": "",
|
||||
"npm_config_key": "",
|
||||
"npm_config_legacy_bundling": "",
|
||||
"npm_config_link": "",
|
||||
"npm_config_local_address": "",
|
||||
"npm_config_loglevel": "notice",
|
||||
"npm_config_logs_max": "10",
|
||||
"npm_config_long": "",
|
||||
"npm_config_maxsockets": "50",
|
||||
"npm_config_message": "%s",
|
||||
"npm_config_metrics_registry": "https://registry.npmjs.org/",
|
||||
"npm_config_node_gyp": "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js",
|
||||
"npm_config_node_options": "",
|
||||
"npm_config_node_version": "12.15.0",
|
||||
"npm_config_noproxy": "",
|
||||
"npm_config_offline": "",
|
||||
"npm_config_onload_script": "",
|
||||
"npm_config_only": "",
|
||||
"npm_config_optional": "true",
|
||||
"npm_config_otp": "",
|
||||
"npm_config_package_lock": "true",
|
||||
"npm_config_package_lock_only": "",
|
||||
"npm_config_parseable": "",
|
||||
"npm_config_prefer_offline": "",
|
||||
"npm_config_prefer_online": "",
|
||||
"npm_config_prefix": "C:\\Users\\nhan\\AppData\\Roaming\\npm",
|
||||
"npm_config_preid": "",
|
||||
"npm_config_production": "",
|
||||
"npm_config_progress": "true",
|
||||
"npm_config_proxy": "",
|
||||
"npm_config_read_only": "",
|
||||
"npm_config_rebuild_bundle": "true",
|
||||
"npm_config_registry": "https://registry.npmjs.org/",
|
||||
"npm_config_rollback": "true",
|
||||
"npm_config_save": "true",
|
||||
"npm_config_save_bundle": "",
|
||||
"npm_config_save_dev": "",
|
||||
"npm_config_save_exact": "",
|
||||
"npm_config_save_optional": "",
|
||||
"npm_config_save_prefix": "^",
|
||||
"npm_config_save_prod": "",
|
||||
"npm_config_scope": "",
|
||||
"npm_config_scripts_prepend_node_path": "warn-only",
|
||||
"npm_config_script_shell": "",
|
||||
"npm_config_searchexclude": "",
|
||||
"npm_config_searchlimit": "20",
|
||||
"npm_config_searchopts": "",
|
||||
"npm_config_searchstaleness": "900",
|
||||
"npm_config_send_metrics": "",
|
||||
"npm_config_shell": "C:\\WINDOWS\\system32\\cmd.exe",
|
||||
"npm_config_shrinkwrap": "true",
|
||||
"npm_config_sign_git_commit": "",
|
||||
"npm_config_sign_git_tag": "",
|
||||
"npm_config_sso_poll_frequency": "500",
|
||||
"npm_config_sso_type": "oauth",
|
||||
"npm_config_strict_ssl": "true",
|
||||
"npm_config_tag": "latest",
|
||||
"npm_config_tag_version_prefix": "v",
|
||||
"npm_config_timing": "",
|
||||
"npm_config_tmp": "C:\\Users\\nhan\\AppData\\Local\\Temp",
|
||||
"npm_config_umask": "0000",
|
||||
"npm_config_unicode": "",
|
||||
"npm_config_unsafe_perm": "true",
|
||||
"npm_config_update_notifier": "true",
|
||||
"npm_config_usage": "",
|
||||
"npm_config_user": "",
|
||||
"npm_config_userconfig": "C:\\Users\\nhan\\.npmrc",
|
||||
"npm_config_user_agent": "npm/6.13.4 node/v12.15.0 win32 x64",
|
||||
"npm_config_version": "",
|
||||
"npm_config_versions": "",
|
||||
"npm_config_viewer": "browser",
|
||||
"npm_execpath": "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js",
|
||||
"npm_lifecycle_event": "dev-windows",
|
||||
"npm_lifecycle_script": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
|
||||
"npm_node_execpath": "C:\\Program Files\\nodejs\\node.exe",
|
||||
"npm_package_dependencies_autoprefixer": "^10.2.6",
|
||||
"npm_package_dependencies_body_scroll_lock": "^3.1.5",
|
||||
"npm_package_dependencies_classnames": "^2.3.1",
|
||||
"npm_package_dependencies_cookie": "^0.4.1",
|
||||
"npm_package_dependencies_email_validator": "^2.0.4",
|
||||
"npm_package_dependencies_eslint": "^7.32.0",
|
||||
"npm_package_dependencies_eslint_config_next": "^11.1.2",
|
||||
"npm_package_dependencies_immutability_helper": "^3.1.1",
|
||||
"npm_package_dependencies_js_cookie": "^2.2.1",
|
||||
"npm_package_dependencies_keen_slider": "^5.5.1",
|
||||
"npm_package_dependencies_lodash_debounce": "^4.0.8",
|
||||
"npm_package_dependencies_lodash_random": "^3.2.0",
|
||||
"npm_package_dependencies_lodash_throttle": "^4.1.1",
|
||||
"npm_package_dependencies_next": "^11.0.0",
|
||||
"npm_package_dependencies_next_seo": "^4.26.0",
|
||||
"npm_package_dependencies_next_themes": "^0.0.14",
|
||||
"npm_package_dependencies_postcss": "^8.3.5",
|
||||
"npm_package_dependencies_postcss_nesting": "^8.0.1",
|
||||
"npm_package_dependencies_react": "^17.0.2",
|
||||
"npm_package_dependencies_react_dom": "^17.0.2",
|
||||
"npm_package_dependencies_react_fast_marquee": "^1.1.4",
|
||||
"npm_package_dependencies_react_merge_refs": "^1.1.0",
|
||||
"npm_package_dependencies_react_player": "^2.9.0",
|
||||
"npm_package_dependencies_react_use_measure": "^2.0.4",
|
||||
"npm_package_dependencies_sass": "^1.38.0",
|
||||
"npm_package_dependencies_swell_js": "^4.0.0-next.0",
|
||||
"npm_package_dependencies_swr": "^0.5.6",
|
||||
"npm_package_dependencies_tabbable": "^5.2.0",
|
||||
"npm_package_dependencies_tailwindcss": "^2.2.2",
|
||||
"npm_package_dependencies_uuidv4": "^6.2.10",
|
||||
"npm_package_dependencies__react_spring_web": "^9.2.1",
|
||||
"npm_package_dependencies__vercel_fetch": "^6.1.0",
|
||||
"npm_package_description": "[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)",
|
||||
"npm_package_devDependencies_deepmerge": "^4.2.2",
|
||||
"npm_package_devDependencies_eslint_config_prettier": "^8.3.0",
|
||||
"npm_package_devDependencies_graphql": "^15.5.1",
|
||||
"npm_package_devDependencies_husky": "^6.0.0",
|
||||
"npm_package_devDependencies_lint_staged": "^11.0.0",
|
||||
"npm_package_devDependencies_postcss_flexbugs_fixes": "^5.0.2",
|
||||
"npm_package_devDependencies_postcss_import": "^14.0.2",
|
||||
"npm_package_devDependencies_postcss_preset_env": "^6.7.0",
|
||||
"npm_package_devDependencies_prettier": "^2.3.0",
|
||||
"npm_package_devDependencies_typescript": "4.3.4",
|
||||
"npm_package_devDependencies__graphql_codegen_cli": "^1.21.5",
|
||||
"npm_package_devDependencies__graphql_codegen_schema_ast": "^1.18.3",
|
||||
"npm_package_devDependencies__graphql_codegen_typescript": "^1.22.2",
|
||||
"npm_package_devDependencies__graphql_codegen_typescript_operations": "^1.18.1",
|
||||
"npm_package_devDependencies__next_bundle_analyzer": "^10.2.3",
|
||||
"npm_package_devDependencies__types_body_scroll_lock": "^2.6.1",
|
||||
"npm_package_devDependencies__types_cookie": "^0.4.0",
|
||||
"npm_package_devDependencies__types_js_cookie": "^2.2.6",
|
||||
"npm_package_devDependencies__types_lodash_debounce": "^4.0.6",
|
||||
"npm_package_devDependencies__types_lodash_random": "^3.2.6",
|
||||
"npm_package_devDependencies__types_lodash_throttle": "^4.1.6",
|
||||
"npm_package_devDependencies__types_node": "^15.12.4",
|
||||
"npm_package_devDependencies__types_react": "^17.0.8",
|
||||
"npm_package_engines_node": ">=14.x",
|
||||
"npm_package_gitHead": "c85942add4e9b92f09d8be5c7904fe25fd254fbe",
|
||||
"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.1",
|
||||
"TMP": "C:\\Users\\nhan\\AppData\\Local\\Temp",
|
||||
"TRACE_ID": "82005ee4f98e2f63",
|
||||
"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"
|
||||
]
|
||||
}
|
@ -103,6 +103,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
.inner {
|
||||
padding: .5rem 1rem;
|
||||
&.onlyIcon {
|
||||
padding: 1rem;
|
||||
}
|
||||
@screen md {
|
||||
padding: .8rem 1.6rem;
|
||||
&.onlyIcon {
|
||||
padding: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
.inner {
|
||||
|
@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
|
||||
interface Props {
|
||||
children?: React.ReactNode,
|
||||
type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
|
||||
size?: 'default' | 'large',
|
||||
size?: 'default' | 'large' | 'small',
|
||||
icon?: React.ReactNode,
|
||||
isIconSuffix?: boolean,
|
||||
loading?: boolean,
|
||||
|
@ -3,14 +3,14 @@ import { IconBuy } from 'src/components/icons'
|
||||
import ButtonCommon from '../ButtonCommon/ButtonCommon'
|
||||
|
||||
interface Props {
|
||||
type?: 'primary' | 'light' | 'ghost',
|
||||
size?: 'default' | 'large',
|
||||
type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
|
||||
size?: 'default' | 'large' | 'small',
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
onClick?: () => void,
|
||||
}
|
||||
|
||||
const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => {
|
||||
const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
|
||||
return (
|
||||
<ButtonCommon
|
||||
type={type}
|
||||
|
@ -3,7 +3,7 @@
|
||||
// min-width: 30.2rem;
|
||||
height: 14.4rem;
|
||||
padding: 2.4rem;
|
||||
@apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
|
||||
@apply bg-primary-light inline-flex justify-start items-center shape-common ;
|
||||
@screen md {
|
||||
// min-width: 598px;
|
||||
height: 28.8rem;
|
||||
@ -15,18 +15,18 @@
|
||||
padding: 2.4rem 4rem 2.4rem 2.4rem;
|
||||
}
|
||||
.left{
|
||||
max-width: 10rem;
|
||||
max-height: 10rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
@screen md {
|
||||
max-width: 24rem;
|
||||
max-height: 24rem;
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
margin-left: 1.2rem;
|
||||
// min-width: 27rem;
|
||||
max-width: 16.6rem;
|
||||
ma-height: 10rem;
|
||||
max-height: 10rem;
|
||||
@apply flex justify-between flex-col;
|
||||
@screen md {
|
||||
margin-left: 2.4rem;
|
||||
@ -60,70 +60,34 @@
|
||||
}
|
||||
}
|
||||
.priceWrapper{
|
||||
@apply flex justify-start;
|
||||
@apply flex justify-start sm-headline;
|
||||
.price{
|
||||
@apply font-bold;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
letter-spacing: -0.01em;
|
||||
@apply font-bold sm-headline;
|
||||
color: var(--text-active);
|
||||
@screen md {
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
}
|
||||
.originPrice{
|
||||
@apply sm-headline;
|
||||
font-weight: normal;
|
||||
margin-left: 0.8rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
color: var(--text-label);
|
||||
text-decoration-line: line-through;
|
||||
@screen md {
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonWarpper{
|
||||
@apply flex;
|
||||
.icon{
|
||||
max-width: 3.2rem;
|
||||
max-height: 3.2rem;
|
||||
@screen sm-only{
|
||||
button{
|
||||
padding: 1rem;
|
||||
svg{
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
button {
|
||||
>div {
|
||||
@apply bg-primary-light;
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
max-width: 5.6rem;
|
||||
max-height: 5.6rem;
|
||||
}
|
||||
}
|
||||
.button{
|
||||
margin-left: 0.8rem;
|
||||
min-width: 12.5rem;
|
||||
max-height: 3.2rem;
|
||||
button{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@screen sm-only {
|
||||
button{
|
||||
padding:0.9rem;
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
min-width: 20.6rem;
|
||||
button{
|
||||
height: initial;
|
||||
}
|
||||
max-height: 5.6rem;
|
||||
|
||||
flex: 1;
|
||||
button {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,8 @@ import s from './FeaturedProductCard.module.scss'
|
||||
import { LANGUAGE } from '../../../utils/language.utils'
|
||||
import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
|
||||
import ButtonCommon from '../ButtonCommon/ButtonCommon'
|
||||
export interface FeaturedProductCardProps extends FeaturedProductProps {
|
||||
import { ImgWithLink } from '..'
|
||||
interface FeaturedProductCardProps extends FeaturedProductProps {
|
||||
buttonText?: string
|
||||
}
|
||||
|
||||
@ -19,7 +20,7 @@ const FeaturedProductCard = ({
|
||||
return (
|
||||
<div className={s.featuredProductCardWarpper}>
|
||||
<div className={s.left}>
|
||||
<img src={imageSrc} alt="image" />
|
||||
<ImgWithLink src={imageSrc} alt={title}/>
|
||||
</div>
|
||||
<div className={s.right}>
|
||||
<div className={s.rightTop}>
|
||||
@ -32,7 +33,7 @@ const FeaturedProductCard = ({
|
||||
</div>
|
||||
<div className={s.buttonWarpper}>
|
||||
<div className={s.icon}>
|
||||
<ButtonIconBuy />
|
||||
<ButtonIconBuy size='default'/>
|
||||
</div>
|
||||
<div className={s.button}>
|
||||
<ButtonCommon>{buttonText}</ButtonCommon>
|
||||
|
@ -2,15 +2,22 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
> main {
|
||||
.wrapperWithBg {
|
||||
@apply bg-background-gray;
|
||||
width: 100%;
|
||||
margin-top: -3.2rem;
|
||||
}
|
||||
|
||||
> main,
|
||||
.wrapperWithBg > main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: min( 100%, 1536px);
|
||||
max-width: min(100%, 1536px);
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.filter{
|
||||
.filter {
|
||||
@screen xl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
|
||||
import { useRouter } from 'next/router'
|
||||
import { FC } from 'react'
|
||||
import { useModalCommon } from 'src/components/hooks'
|
||||
import { BRAND, CATEGORY, FEATURED, FILTER_PAGE } from 'src/utils/constanst.utils'
|
||||
import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
|
||||
import { ScrollToTop } from '..'
|
||||
import Footer from '../Footer/Footer'
|
||||
import Header from '../Header/Header'
|
||||
@ -19,6 +19,8 @@ const Layout: FC<Props> = ({ children }) => {
|
||||
const { locale = 'en-US', pathname } = useRouter()
|
||||
const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const toggleFilter = () => {
|
||||
if (visibleFilter) {
|
||||
closeFilter()
|
||||
@ -26,11 +28,18 @@ const Layout: FC<Props> = ({ children }) => {
|
||||
openFilter()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<CommerceProvider locale={locale}>
|
||||
<div className={s.mainLayout}>
|
||||
<Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
|
||||
<main >{children}</main>
|
||||
{
|
||||
router.pathname === ROUTE.ACCOUNT ?
|
||||
<section className={s.wrapperWithBg}>
|
||||
<main>{children}</main>
|
||||
</section> :
|
||||
<main>{children}</main>
|
||||
}
|
||||
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
|
||||
<ScrollToTop visibilityHeight={1500} />
|
||||
{
|
||||
|
@ -28,6 +28,7 @@
|
||||
margin-right: 0.8rem;
|
||||
background-color: var(--gray);
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color:white;
|
||||
background-color: var(--primary);
|
||||
|
@ -20,7 +20,7 @@
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
z-index: 9999999;
|
||||
}
|
||||
}
|
||||
.menuNavigationProductModal{
|
||||
@ -30,7 +30,7 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 10000;
|
||||
z-index: 99999999;
|
||||
transform: translateY(100%);
|
||||
|
||||
&.animation{
|
||||
|
@ -19,6 +19,7 @@
|
||||
padding: 0 1.6rem;
|
||||
margin-right: 0.8rem;
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
@apply font-bold relative;
|
||||
color:var(--text-active);
|
||||
|
@ -63,15 +63,15 @@ const ProductCard = ({
|
||||
{
|
||||
isSingleButton ?
|
||||
<div className={s.cardButton}>
|
||||
<ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
|
||||
<ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div className={s.cardIcon}>
|
||||
<ButtonIconBuy />
|
||||
<ButtonIconBuy/>
|
||||
</div>
|
||||
<div className={s.cardButton}>
|
||||
<ButtonCommon type="light">{buttonText}</ButtonCommon>
|
||||
<ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
@ -1,10 +1,23 @@
|
||||
@import '../../../styles/utilities';
|
||||
.quanittyInputWarper{
|
||||
border-color: theme("textColor.active");
|
||||
@apply border border-solid inline-flex justify-between items-center custom-border-radius;
|
||||
.quanittyInputWarper {
|
||||
@apply shape-common-border;
|
||||
&::before{
|
||||
height: 100%;
|
||||
top: 1px;
|
||||
background-color: var(--text-active);
|
||||
}
|
||||
.inner {
|
||||
@apply inline-flex justify-between items-center;
|
||||
margin: 0;
|
||||
}
|
||||
.plusIcon, .minusIcon{
|
||||
@apply flex justify-center items-center;
|
||||
min-height: 2rem;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
svg path {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.default{
|
||||
|
@ -4,8 +4,8 @@ import classNames from 'classnames'
|
||||
import { IconMinus, IconPlus } from '../../icons'
|
||||
interface QuanittyInputProps
|
||||
extends Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
'onChange' | 'min' | 'max' | 'step' | "type" | "size"
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
'onChange' | 'min' | 'max' | 'step' | "type" | "size"
|
||||
> {
|
||||
size?: 'default' | 'small'
|
||||
onChange?: (value: number) => void
|
||||
@ -63,18 +63,20 @@ const QuanittyInput = ({
|
||||
|
||||
return (
|
||||
<div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
|
||||
<div className={s.minusIcon} onClick={onMinusClick}>
|
||||
<IconMinus />
|
||||
</div>
|
||||
<input
|
||||
{...props}
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={onValueChange}
|
||||
className={s.quanittyInput}
|
||||
/>
|
||||
<div className={s.plusIcon} onClick={onPlusClick}>
|
||||
<IconPlus />
|
||||
<div className={s.inner}>
|
||||
<div className={s.minusIcon} onClick={onMinusClick}>
|
||||
<IconMinus />
|
||||
</div>
|
||||
<input
|
||||
{...props}
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={onValueChange}
|
||||
className={s.quanittyInput}
|
||||
/>
|
||||
<div className={s.plusIcon} onClick={onPlusClick}>
|
||||
<IconPlus />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -4,7 +4,6 @@
|
||||
@apply inline-flex flex-col justify-start;
|
||||
.image{
|
||||
width: 100%;
|
||||
max-height: 22rem;
|
||||
border-radius: 2.4rem;
|
||||
img {
|
||||
border-radius: 2.4rem;
|
||||
@ -12,14 +11,20 @@
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@screen md{
|
||||
max-height: 22rem;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
|
||||
@apply font-bold;
|
||||
@apply font-bold overflow-hidden overflow-ellipsis ;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-active);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -30,5 +35,9 @@
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 3rem;
|
||||
@screen md{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
const IconMinus = ({ ...props }) => {
|
||||
const IconMinus = () => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
|
@ -1,4 +1,4 @@
|
||||
const IconPlus = ({ ...props }) => {
|
||||
const IconPlus = () => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
|
@ -1,23 +1,26 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.accountPage {
|
||||
@apply spacing-horizontal;
|
||||
background-color: #F5F4F2;
|
||||
margin-top: -3.2rem;
|
||||
padding-top: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
@apply bg-background-gray;
|
||||
padding: 3.2rem 2rem;
|
||||
min-height: 70rem;
|
||||
|
||||
|
||||
@screen md {
|
||||
padding-left: 3.2rem;
|
||||
padding-right: 3.2rem;
|
||||
padding-left: 2.8rem;
|
||||
padding-right: 2.8rem;
|
||||
padding: 5.4rem 2rem;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
padding-left: 6.4rem;
|
||||
padding-right: 6.4rem;
|
||||
}
|
||||
|
||||
@screen xl {
|
||||
@apply spacing-horizontal
|
||||
padding-left: 11.2rem;
|
||||
padding-right: 11.2rem;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
|
@ -16,7 +16,6 @@
|
||||
margin: auto;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
|
||||
@screen md {
|
||||
margin-left: 0
|
||||
}
|
||||
@ -56,22 +55,16 @@
|
||||
}
|
||||
|
||||
.editInfoBtn {
|
||||
@apply text-center font-bold custom-border-radius;
|
||||
margin: auto;
|
||||
@apply flex items-center justify-center;
|
||||
margin-top: 2.4rem;
|
||||
margin-bottom: 2.4rem;
|
||||
padding: .8rem 1.6rem;
|
||||
color: #141414;
|
||||
border: 1px solid #141414;
|
||||
max-width: 8.8rem;
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
background-color: #FBFBFB;
|
||||
button div {
|
||||
background-color: #F5F4F2 !important;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
margin-left: 0;
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
}
|
@ -4,6 +4,8 @@ import s from './AccountInfomation.module.scss'
|
||||
import Image from "next/image"
|
||||
import avatar from '../../assets/avatar.png';
|
||||
|
||||
import { ButtonCommon } from 'src/components/common'
|
||||
|
||||
interface AccountProps {
|
||||
name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
|
||||
}
|
||||
@ -44,7 +46,9 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
|
||||
{account.phoneNumber}
|
||||
</div>
|
||||
|
||||
<div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
|
||||
<div className={s.editInfoBtn}>
|
||||
<ButtonCommon onClick={showEditForm} type="light" size="small">Edit</ButtonCommon>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
@ -25,7 +25,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
|
||||
{
|
||||
waiting.map((order, i) => {
|
||||
return (
|
||||
<DeliveryItem key={order.id} id={order.id} status="Waiting" products={order.products} totalPrice={order.totalPrice} />
|
||||
<DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
|
||||
)
|
||||
})
|
||||
}
|
||||
@ -36,7 +36,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
|
||||
{
|
||||
delivering.map((order, i) => {
|
||||
return (
|
||||
<DeliveryItem key={order.id} id={order.id} status="Delivering" products={order.products} totalPrice={order.totalPrice} />
|
||||
<DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
|
||||
)
|
||||
})
|
||||
}
|
||||
@ -47,7 +47,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
|
||||
{
|
||||
delivered.map((order, i) => {
|
||||
return (
|
||||
<DeliveryItem key={order.id} id={order.id} status="Delivered" products={order.products} totalPrice={order.totalPrice} />
|
||||
<DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder'
|
||||
|
||||
interface DeliveryItemProps {
|
||||
id: string;
|
||||
status: "Waiting" | "Delivering" | "Delivered";
|
||||
status: "waiting" | "delivering" | "delivered";
|
||||
products: string[];
|
||||
totalPrice: number;
|
||||
}
|
||||
@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
|
||||
<div className={s.separator}></div>
|
||||
<Products products={products} />
|
||||
<TotalPrice totalPrice={totalPrice} />
|
||||
<ReOrder show={status === "Delivered" ? true : false}/>
|
||||
<ReOrder visible={status === "delivered" ? true : false}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
|
||||
|
||||
interface IdAndStatusProps {
|
||||
id?: string;
|
||||
status: "Waiting" | "Delivering" | "Delivered";
|
||||
status: "waiting" | "delivering" | "delivered";
|
||||
}
|
||||
|
||||
const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => {
|
||||
const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
|
||||
return (
|
||||
<div className={s.idAndStatus}>
|
||||
<div className={s.id}>
|
||||
|
@ -1,9 +1,21 @@
|
||||
@import '../../../../../../styles/utilities';
|
||||
|
||||
.reOrder {
|
||||
@apply hidden;
|
||||
@apply hidden shape-common text-white font-bold;
|
||||
background-color: var(--primary);
|
||||
margin-right: 1.2rem;
|
||||
&.show {
|
||||
padding: .4rem .6rem;
|
||||
|
||||
@screen lg {
|
||||
padding: .8rem 1.2rem;
|
||||
margin-right: 2.4rem;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
}
|
@ -1,18 +1,22 @@
|
||||
import classNames from "classnames"
|
||||
import React from "react"
|
||||
import { ButtonCommon } from "src/components/common"
|
||||
import Link from 'next/link'
|
||||
import s from './ReOrder.module.scss'
|
||||
|
||||
interface ReOrderProps {
|
||||
show: boolean;
|
||||
visible: boolean;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
const ReOrder = ({ show=false } : ReOrderProps) => {
|
||||
const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => {
|
||||
return (
|
||||
<div className={classNames(s.reOrder, {
|
||||
[s.show]: show
|
||||
[s.visible]: visible
|
||||
})}>
|
||||
<ButtonCommon>Re-Order</ButtonCommon>
|
||||
<Link href={href}>
|
||||
<a>Re-Order</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,11 +1,12 @@
|
||||
@import "../../../../styles/_utilities";
|
||||
.beadcrumb{
|
||||
padding-left: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
}
|
||||
.image{
|
||||
@apply spacing-horizontal;
|
||||
div{
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 2.4rem;
|
||||
min-height: 45.2rem;
|
||||
|
@ -16,20 +16,5 @@
|
||||
padding-top: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
@apply flex justify-start spacing-horizontal;
|
||||
.tab{
|
||||
font-family: var(--font-heading);
|
||||
padding: 1.6rem 1.6rem 0.8rem 1.6rem;
|
||||
font-size: 2.4rem;
|
||||
line-height: 2.8rem;
|
||||
@screen md{
|
||||
font-size: 3.2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
outline: none;
|
||||
&.active{
|
||||
@apply text-background custom-border-radius bg-primary;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { HeadingCommon, ViewAllItem } from 'src/components/common'
|
||||
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
|
||||
import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
|
||||
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
||||
import image13 from "../../../../../public/assets/images/image13.png"
|
||||
import image14 from "../../../../../public/assets/images/image14.png"
|
||||
import image12 from "../../../../../public/assets/images/image12.png"
|
||||
import HomeRecipeTab from './HomeRecipeTab/HomeRecipeTab'
|
||||
|
||||
interface HomeRecipeProps {
|
||||
data?: RecipeCardProps[]
|
||||
@ -44,7 +45,28 @@ const recipe:RecipeCardProps[] = [{
|
||||
}]
|
||||
|
||||
|
||||
const TABS = [
|
||||
{
|
||||
name: 'Noodle',
|
||||
value: 'Noodle',
|
||||
},
|
||||
{
|
||||
name: 'Curry',
|
||||
value: 'Curry',
|
||||
},
|
||||
{
|
||||
name: 'Special Recipes',
|
||||
value: 'Special Recipes',
|
||||
}
|
||||
]
|
||||
|
||||
const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
|
||||
const [activeTab, setActiveTab] = useState<string>(TABS[0].value)
|
||||
|
||||
const onTabChanged = (value: string) => {
|
||||
setActiveTab(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={s.homeRecipeWarpper}>
|
||||
<div className={s.top}>
|
||||
@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.mid}>
|
||||
<button className={classNames(s.tab,s.active)}>Noodle</button>
|
||||
<button className={s.tab}>Curry</button>
|
||||
<button className={s.tab}>Special Recipes</button>
|
||||
{
|
||||
TABS.map(item => <HomeRecipeTab
|
||||
key={item.value}
|
||||
activeValue={activeTab}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
onClick={onTabChanged} />)
|
||||
}
|
||||
</div>
|
||||
<div className={s.bot}>
|
||||
<RecipeCarousel data={data} itemKey={itemKey} />
|
||||
|
@ -0,0 +1,17 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.tab {
|
||||
all: unset;
|
||||
@apply heading-3 font-heading cursor-pointer outline-none;
|
||||
padding: 1.6rem;
|
||||
&:focus {
|
||||
outline: none;
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--text-active);
|
||||
}
|
||||
&.active {
|
||||
@apply text-background shape-common bg-primary;
|
||||
}
|
||||
}
|
@ -0,0 +1,26 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import s from './HomeRecipeTab.module.scss'
|
||||
|
||||
interface Props {
|
||||
activeValue: string
|
||||
name: string
|
||||
value: string
|
||||
onClick: (value: string) => void
|
||||
}
|
||||
|
||||
|
||||
const HomeRecipeTab = ({ activeValue, name, value, onClick }: Props) => {
|
||||
const handleClick = () => {
|
||||
onClick(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={handleClick} className={classNames(s.tab, {
|
||||
[s.active]: activeValue === value
|
||||
})}>{name}</button>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeRecipeTab;
|
@ -1,61 +0,0 @@
|
||||
@import "../../../../../styles/_utilities";
|
||||
|
||||
.recipesItem {
|
||||
@apply flex justify-between;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@screen md{
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.recipesItemImage {
|
||||
@apply transition-all duration-200;
|
||||
width: 31%;
|
||||
a{
|
||||
div{
|
||||
@apply object-cover;
|
||||
min-height: 19.6rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@apply object-cover cursor-pointer;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
height:100%;
|
||||
border-radius: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recipesItemText {
|
||||
width: 65%;
|
||||
.recipesItemName{
|
||||
@apply topline font-bold cursor-pointer;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
font-feature-settings: "salt" on;
|
||||
color:var(--text-active);
|
||||
margin-top: 1.6rem;
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.recipesItemDescription{
|
||||
color:var(--text-label);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
}
|
@ -1,32 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import { ImgWithLink } from 'src/components/common';
|
||||
import s from './RecipesItem.module.scss';
|
||||
interface RecipesItem {
|
||||
image:string,
|
||||
name: string,
|
||||
description:string,
|
||||
link: string
|
||||
}
|
||||
|
||||
const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
|
||||
return (
|
||||
<div className={s.recipesItem}>
|
||||
<div className={s.recipesItemImage}>
|
||||
<Link href={link}>
|
||||
<a>
|
||||
<ImgWithLink src={image} alt="author" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href={link}>
|
||||
<a className={s.recipesItemText}>
|
||||
<div className={s.recipesItemName}>{name}</div>
|
||||
<div className={s.recipesItemDescription}>{description}</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipesItem
|
@ -6,6 +6,10 @@
|
||||
padding:0 3.2rem;
|
||||
padding-bottom:5.6rem;
|
||||
}
|
||||
div{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.breadcrumb{
|
||||
padding:1rem 0;
|
||||
}
|
||||
@ -39,11 +43,16 @@
|
||||
@screen md {
|
||||
@apply flex justify-between flex-wrap;
|
||||
margin: 1rem 0;
|
||||
|
||||
}
|
||||
.item {
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
@screen md {
|
||||
width: calc(97% / 2);
|
||||
margin-top:1rem;
|
||||
|
||||
}
|
||||
@screen lg{
|
||||
width: calc(97% / 3);
|
||||
@ -63,7 +72,9 @@
|
||||
.boxSelect{
|
||||
@apply flex justify-between w-full;
|
||||
padding: 2.5rem 0;
|
||||
|
||||
div{
|
||||
max-width: 17.6rem;
|
||||
}
|
||||
@screen xl {
|
||||
@apply block;
|
||||
width: auto;
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
:root {
|
||||
--primary: #5b9a74;
|
||||
--primary-light: #e0f6e8;
|
||||
--primary-light: #e3f2e9;
|
||||
--primary-lightest: #effaf4;
|
||||
|
||||
--info-dark: #00317a;
|
||||
|
@ -25,7 +25,7 @@
|
||||
}
|
||||
.heading-3 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
@ -114,8 +114,6 @@
|
||||
|
||||
.shape-common {
|
||||
position: relative;
|
||||
$border: 2px;
|
||||
margin: $border;
|
||||
clip-path: url(#svg-custom-shape);
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user