diff --git a/pages/test.tsx b/pages/test.tsx index 49d2262fc..7cc371625 100644 --- a/pages/test.tsx +++ b/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({ 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 ( <> - - {/* showDots={true} draggable={true} infinite={true} data={PRODUCT_DATA_TEST} Component={ProductCard} responsive={RESPONSIVE} itemKey="tets"/> */} + ) } diff --git a/report.20210916.143314.10644.0.001.json b/report.20210916.143314.10644.0.001.json new file mode 100644 index 000000000..c4641195e --- /dev/null +++ b/report.20210916.143314.10644.0.001.json @@ -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 >::operator<<+10873" + }, + { + "pc": "0x00007ff7f3855b7c", + "symbol": "std::basic_ostream >::operator<<+28316" + }, + { + "pc": "0x00007ff7f3854b38", + "symbol": "std::basic_ostream >::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": "[![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": "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" + ] +} \ No newline at end of file diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index a0c33947d..32cf65655 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -103,6 +103,20 @@ } } } + &.small { + .inner { + padding: .5rem 1rem; + &.onlyIcon { + padding: 1rem; + } + @screen md { + padding: .8rem 1.6rem; + &.onlyIcon { + padding: .8rem; + } + } + } + } &.large { .inner { diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 965e9519e..d83621d30 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -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, diff --git a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx index c1209c1f8..7b2cdd9ce 100644 --- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx +++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx @@ -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 ( 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; } } } diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx index aa6753554..9cd84235a 100644 --- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx +++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx @@ -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 (
- image +
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
- +
{buttonText} diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss index 679b0b48f..97ed29624 100644 --- a/src/components/common/Layout/Layout.module.scss +++ b/src/components/common/Layout/Layout.module.scss @@ -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; } -} \ No newline at end of file +} diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 94d2f3320..4070c8aa6 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { 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 = ({ 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 = ({ children }) => { openFilter() } } + return (
-
{children}
+ { + router.pathname === ROUTE.ACCOUNT ? +
+
{children}
+
: +
{children}
+ }
{ diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss index 87a792297..b8b6596ce 100644 --- a/src/components/common/MenuFilter/MenuFilter.module.scss +++ b/src/components/common/MenuFilter/MenuFilter.module.scss @@ -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); diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss index 353b9073e..6c7ee9c17 100644 --- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -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{ diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss index d259611c7..732f0e6eb 100644 --- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss @@ -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); diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index af982cbd1..a46e8a6fb 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -63,15 +63,15 @@ const ProductCard = ({ { isSingleButton ?
- }>Add to cart + } size='small'>Add to cart
: <>
- +
- {buttonText} + {buttonText}
} diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss index d8a0e5fc1..7609ad10d 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.module.scss +++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss @@ -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{ diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx index 20baba9ea..e31abb880 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.tsx +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames' import { IconMinus, IconPlus } from '../../icons' interface QuanittyInputProps extends Omit< - React.InputHTMLAttributes, - 'onChange' | 'min' | 'max' | 'step' | "type" | "size" + React.InputHTMLAttributes, + 'onChange' | 'min' | 'max' | 'step' | "type" | "size" > { size?: 'default' | 'small' onChange?: (value: number) => void @@ -63,18 +63,20 @@ const QuanittyInput = ({ return (
-
- -
- -
- +
+
+ +
+ +
+ +
) diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss index 19f3eb76a..6b07d9109 100644 --- a/src/components/common/RecipeCard/RecipeCard.module.scss +++ b/src/components/common/RecipeCard/RecipeCard.module.scss @@ -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; + } } } \ No newline at end of file diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx index 977692278..6e572412a 100644 --- a/src/components/icons/IconMinus.tsx +++ b/src/components/icons/IconMinus.tsx @@ -1,4 +1,4 @@ -const IconMinus = ({ ...props }) => { +const IconMinus = () => { return ( { +const IconPlus = () => { return ( { {account.phoneNumber}
-
Edit
+
+ Edit +
) } diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx index 858526f26..211cebe3b 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -25,7 +25,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { waiting.map((order, i) => { return ( - + ) }) } @@ -36,7 +36,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { delivering.map((order, i) => { return ( - + ) }) } @@ -47,7 +47,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { delivered.map((order, i) => { return ( - + ) }) } diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx index a8ccbb69d..b42a0f91e 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx @@ -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)
- + ) } diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx index 578c94f97..d09868272 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx @@ -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 (
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss index 517dd2e4f..8b855196e 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss @@ -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; + } } \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx index aaef9153c..4d6164676 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx @@ -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 (
- Re-Order + + Re-Order +
) } diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss index aad3aebbf..b07e8ef46 100644 --- a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss +++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss @@ -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; diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss index 6ec4159a0..02a34d2bf 100644 --- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss @@ -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; - } - - } } } diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx index fa9daabf1..65c0b2ac7 100644 --- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx @@ -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(TABS[0].value) + + const onTabChanged = (value: string) => { + setActiveTab(value) + } + return (
@@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
- - - + { + TABS.map(item => ) + }
diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss new file mode 100644 index 000000000..08c5e2777 --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss @@ -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; + } +} diff --git a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx new file mode 100644 index 000000000..c9031bf1e --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx @@ -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 ( + + + ); +}; + +export default HomeRecipeTab; \ No newline at end of file diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss deleted file mode 100644 index dac6dbbc9..000000000 --- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss +++ /dev/null @@ -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; - } - -} diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx deleted file mode 100644 index 01918c86e..000000000 --- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx +++ /dev/null @@ -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 ( - - ) -} - -export default RecipesItem diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss index 5f9ded191..51ed15a3e 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss @@ -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; diff --git a/src/styles/_base.scss b/src/styles/_base.scss index a3ba0a6db..41d33bdf1 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -3,7 +3,7 @@ :root { --primary: #5b9a74; - --primary-light: #e0f6e8; + --primary-light: #e3f2e9; --primary-lightest: #effaf4; --info-dark: #00317a; diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 5ce5f24af..af566560a 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -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); }