From 4ff7a9a4f5c6fe5277d0eb61a941c5c6fe8ca4df Mon Sep 17 00:00:00 2001 From: "Mr. Singleton" Date: Thu, 30 Nov 2023 07:42:12 -0500 Subject: [PATCH] #23 Map Section (#10) --- package-lock.json | 189 +++++++++++++++++- sanityIo/schemas/businessContact.js | 10 + sanityIo/schemas/contentContainer.js | 1 + sanityIo/schemas/schema.js | 4 +- sanityIo/schemas/sections/MapSection.js | 52 +++++ sanityIo/schemas/services/serviceAmenity.js | 13 ++ .../BlockContentLayoutContainer.tsx | 13 +- src/components/BlockContentTypes.ts | 11 + .../animated/AnimatedPortfolioSection.tsx | 2 +- src/components/animated/MapSection.tsx | 161 +++++++++++++++ 10 files changed, 448 insertions(+), 8 deletions(-) create mode 100644 sanityIo/schemas/sections/MapSection.js create mode 100644 src/components/animated/MapSection.tsx diff --git a/package-lock.json b/package-lock.json index df221501..688fbefa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,20 @@ { - "name": "the-handsomestnerd-internal", - "version": "0.0.1", + "name": "chowworks-website", + "version": "0.3.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "the-handsomestnerd-internal", - "version": "0.0.1", + "name": "chowworks-website", + "version": "0.3.1", + "license": "GPL-3.0-or-later", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.18", "@mui/material": "^5.14.18", "@mui/styles": "^5.14.18", + "@react-google-maps/api": "^2.19.2", "@storybook/addon-mdx-gfm": "^7.4.6", "@storybook/react-webpack5": "^7.4.6", "@tanstack/react-query": "^4.36.1", @@ -24,6 +26,7 @@ "firebase": "^9.14.0", "framer-motion": "^10.16.5", "ga-gtag": "^1.1.5", + "google-map-react": "^2.2.1", "material-ui-popup-state": "^5.0.9", "moment": "^2.29.4", "msw": "^0.47.4", @@ -71,6 +74,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", "@types/aos": "^3.0.4", + "@types/google-map-react": "^2.1.10", "@types/jest": "^29.5.5", "@types/react": "^18.0.22", "@types/react-dom": "^18.0.7", @@ -4122,6 +4126,23 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz", "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==" }, + "node_modules/@googlemaps/js-api-loader": { + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", + "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==", + "dependencies": { + "fast-deep-equal": "^3.1.3" + } + }, + "node_modules/@googlemaps/markerclusterer": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.3.2.tgz", + "integrity": "sha512-zb9OQP8XscZp2Npt1uQUYnGKu1miuq4DPP28JyDuFd6HV17HCEcjV9MtBi4muG/iVRXXvuHW9bRCnHbao9ITfw==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "supercluster": "^8.0.1" + } + }, "node_modules/@grpc/grpc-js": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.3.tgz", @@ -5016,6 +5037,11 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" + }, "node_modules/@mdx-js/react": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz", @@ -6380,6 +6406,33 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@react-google-maps/api": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.2.tgz", + "integrity": "sha512-Vt57XWzCKfsUjKOmFUl2erVVfOePkPK5OigF/f+q7UuV/Nm9KDDy1PMFBx+wNahEqOd6a32BxfsykEhBnbU9wQ==", + "dependencies": { + "@googlemaps/js-api-loader": "1.16.2", + "@googlemaps/markerclusterer": "2.3.2", + "@react-google-maps/infobox": "2.19.2", + "@react-google-maps/marker-clusterer": "2.19.2", + "@types/google.maps": "3.53.5", + "invariant": "2.2.4" + }, + "peerDependencies": { + "react": "^16.8 || ^17 || ^18", + "react-dom": "^16.8 || ^17 || ^18" + } + }, + "node_modules/@react-google-maps/infobox": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz", + "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg==" + }, + "node_modules/@react-google-maps/marker-clusterer": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz", + "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw==" + }, "node_modules/@remix-run/router": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", @@ -12384,6 +12437,20 @@ "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz", "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==" }, + "node_modules/@types/google-map-react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@types/google-map-react/-/google-map-react-2.1.10.tgz", + "integrity": "sha512-8/0UllZS7tF08WNBRPQlSJCkETvz3e3sZoPxzDaWkj2iV5dmFSnOKXVtoeKo8dLZSe+RkLn479t1wj6nXmLLSA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/google.maps": { + "version": "3.53.5", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz", + "integrity": "sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg==" + }, "node_modules/@types/graceful-fs": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz", @@ -19101,6 +19168,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/google-map-react": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.1.tgz", + "integrity": "sha512-Dg8aexf5rNSmywj0XKQ5m4RNzVcWwKEM2BGDj5aPChD0um8ZRjB5Upcb/yg/i0oG1aES29asQ5+6BHVgrK5xGA==", + "dependencies": { + "@googlemaps/js-api-loader": "^1.13.8", + "@mapbox/point-geometry": "^0.1.0", + "eventemitter3": "^4.0.4", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -22399,6 +22484,11 @@ "setimmediate": "^1.0.5" } }, + "node_modules/kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -28828,6 +28918,14 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" }, + "node_modules/supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "dependencies": { + "kdbush": "^4.0.2" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -34168,6 +34266,23 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz", "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==" }, + "@googlemaps/js-api-loader": { + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", + "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==", + "requires": { + "fast-deep-equal": "^3.1.3" + } + }, + "@googlemaps/markerclusterer": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.3.2.tgz", + "integrity": "sha512-zb9OQP8XscZp2Npt1uQUYnGKu1miuq4DPP28JyDuFd6HV17HCEcjV9MtBi4muG/iVRXXvuHW9bRCnHbao9ITfw==", + "requires": { + "fast-deep-equal": "^3.1.3", + "supercluster": "^8.0.1" + } + }, "@grpc/grpc-js": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.3.tgz", @@ -34877,6 +34992,11 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" + }, "@mdx-js/react": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz", @@ -35661,6 +35781,29 @@ "@babel/runtime": "^7.13.10" } }, + "@react-google-maps/api": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.2.tgz", + "integrity": "sha512-Vt57XWzCKfsUjKOmFUl2erVVfOePkPK5OigF/f+q7UuV/Nm9KDDy1PMFBx+wNahEqOd6a32BxfsykEhBnbU9wQ==", + "requires": { + "@googlemaps/js-api-loader": "1.16.2", + "@googlemaps/markerclusterer": "2.3.2", + "@react-google-maps/infobox": "2.19.2", + "@react-google-maps/marker-clusterer": "2.19.2", + "@types/google.maps": "3.53.5", + "invariant": "2.2.4" + } + }, + "@react-google-maps/infobox": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz", + "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg==" + }, + "@react-google-maps/marker-clusterer": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz", + "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw==" + }, "@remix-run/router": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz", @@ -39836,6 +39979,20 @@ "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz", "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==" }, + "@types/google-map-react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@types/google-map-react/-/google-map-react-2.1.10.tgz", + "integrity": "sha512-8/0UllZS7tF08WNBRPQlSJCkETvz3e3sZoPxzDaWkj2iV5dmFSnOKXVtoeKo8dLZSe+RkLn479t1wj6nXmLLSA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/google.maps": { + "version": "3.53.5", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz", + "integrity": "sha512-HoRq4Te8J6krH7hj+TfdYepqegoKZCj3kkaK5gf+ySFSHLvyqYkDvkrtbcVJXQ6QBphQ0h1TF7p4J6sOh4r/zg==" + }, "@types/graceful-fs": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz", @@ -44792,6 +44949,17 @@ "slash": "^3.0.0" } }, + "google-map-react": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.1.tgz", + "integrity": "sha512-Dg8aexf5rNSmywj0XKQ5m4RNzVcWwKEM2BGDj5aPChD0um8ZRjB5Upcb/yg/i0oG1aES29asQ5+6BHVgrK5xGA==", + "requires": { + "@googlemaps/js-api-loader": "^1.13.8", + "@mapbox/point-geometry": "^0.1.0", + "eventemitter3": "^4.0.4", + "prop-types": "^15.7.2" + } + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -47273,6 +47441,11 @@ "setimmediate": "^1.0.5" } }, + "kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -51671,6 +51844,14 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" }, + "supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "requires": { + "kdbush": "^4.0.2" + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/sanityIo/schemas/businessContact.js b/sanityIo/schemas/businessContact.js index f20fd653..127b7868 100644 --- a/sanityIo/schemas/businessContact.js +++ b/sanityIo/schemas/businessContact.js @@ -94,5 +94,15 @@ export default { type: "array", of: [{type: "scheduleGroup"}] }, + { + name: 'longitude', + title: 'Longitude', + type: 'string', + }, + { + name: 'latitude', + title: 'Latitude', + type: 'string', + }, ] } \ No newline at end of file diff --git a/sanityIo/schemas/contentContainer.js b/sanityIo/schemas/contentContainer.js index ef4abe41..082698fc 100644 --- a/sanityIo/schemas/contentContainer.js +++ b/sanityIo/schemas/contentContainer.js @@ -25,6 +25,7 @@ export default { {name: 'header', title: 'Header Menu',type: 'reference', to: [{type: 'menuContainer',}]}, {name: 'footer', title: 'Footer Menu',type: 'reference', to: [{type: 'menuContainer',}]}, {name: 'Headline with CTA', title: 'Headline with CTA',type: 'reference', to: [{type: 'HeadlineCTASection',}]}, + {name: 'Map Section', title: 'Map Section',type: 'reference', to: [{type: 'MapSection',}]}, {name: 'HeroAnimatedContentSection', title: 'Animated Hero Content',type: 'reference', to: [{type: 'HeroAnimatedContentSection'}]}, {name: 'AnimatedAboutUsSection', title: 'Animated About Us Section',type: 'reference', to: [{type: 'AnimatedAboutUsSection'}]}, {name: 'AnimatedServicesSection', title: 'Animated Services Section',type: 'reference', to: [{type: 'AnimatedServicesSection'}]}, diff --git a/sanityIo/schemas/schema.js b/sanityIo/schemas/schema.js index f0417b92..7ae83beb 100644 --- a/sanityIo/schemas/schema.js +++ b/sanityIo/schemas/schema.js @@ -91,6 +91,7 @@ import MuiMediaQuery from "./mui/MuiMediaQuery"; import AnimatedPortfolioItem from "./sections/animated/AnimatedPortfolioItem"; import AnimatedPortfolioSection from "./sections/animated/AnimatedPortfolioSection"; import HeadlineCTASection from "./HeadlineCTASection"; +import MapSection from "./sections/MapSection"; // Then we give our schema to the builder and provide the result to Sanity export default [ @@ -187,5 +188,6 @@ export default [ AnimatedPortfolioItem, AnimatedPortfolioSection, HeroSlideContent, - HeadlineCTASection + HeadlineCTASection, + MapSection ] diff --git a/sanityIo/schemas/sections/MapSection.js b/sanityIo/schemas/sections/MapSection.js new file mode 100644 index 00000000..b465f890 --- /dev/null +++ b/sanityIo/schemas/sections/MapSection.js @@ -0,0 +1,52 @@ +export default { + name: 'MapSection', + title: 'Map Section', + type: 'document', + fields: [ + { + name: 'name', + title: 'Name', + type: 'string', + }, + { + name: 'address', + title: 'Address', + type: 'string', + }, + { + name: 'mapMarkerTitle', + title: 'Map Marker Title', + type: 'string', + }, + { + name: 'mapMarkerName', + title: 'Map Marker Name', + type: 'string', + }, + { + name: 'longitude', + title: 'Longitude', + type: 'string', + }, + { + name: 'latitude', + title: 'Latitude', + type: 'string', + }, + { + name: 'contactInfo', + title: 'Contact Info', + type: 'array', + validation: Rule => Rule.max(3), + of:[{type: 'ServiceAmenityItem'}] + }, + ], + preview: { + select: { + title: 'name', + }, + }, +} + + + diff --git a/sanityIo/schemas/services/serviceAmenity.js b/sanityIo/schemas/services/serviceAmenity.js index 93df596b..418b8418 100644 --- a/sanityIo/schemas/services/serviceAmenity.js +++ b/sanityIo/schemas/services/serviceAmenity.js @@ -16,11 +16,24 @@ export default { hotspot: true, }, }, + { name: 'title', title: 'Title', type: 'string', }, + { + name: 'muiIcon', + title: 'Icon', + type: 'string', + options: { + list:[ + {title:"location", value: "location"}, + {title:"email", value: "email"}, + {title:"phone", value: "phone"} + ] + } + }, { name: 'description', title: 'Description', diff --git a/src/components/BlockContentLayoutContainer.tsx b/src/components/BlockContentLayoutContainer.tsx index 1d023885..2093a061 100644 --- a/src/components/BlockContentLayoutContainer.tsx +++ b/src/components/BlockContentLayoutContainer.tsx @@ -6,7 +6,7 @@ import {blockSerializers} from '../common/sanityIo/BlockContentRenderer' import { AnimatedAboutUsSectionType, AnimatedPortfolioSectionType, AnimatedServicesSectionType, HeadlineCTASectionType, HeroAnimatedContentSectionType, - HowItWorksSectionType, + HowItWorksSectionType, MapSectionType, PortfolioSectionType, ResumeBioSectionType, ResumeContactUsSectionType, @@ -57,6 +57,7 @@ import AnimatedAboutUsSection from "./animated/AnimatedAboutUsSection"; import AnimatedServicesSection from './animated/AnimatedServicesSection' import AnimatedPortfolioSection from "./animated/AnimatedPortfolioSection"; import HeadlineCTASection from "./animated/HeadlineCTASection"; +import MapSection from "./animated/MapSection"; export type BlockContentLayoutContainerProps = { content?: any, @@ -453,11 +454,19 @@ const BlockContentLayoutContainer: FunctionComponent + return + case 'MapSection': + const mapSection: MapSectionType = columnLayoutContainer + + return + + default: return // return Undefined section {columnLayoutContainer._type} diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts index 5a69008b..fc9f8560 100644 --- a/src/components/BlockContentTypes.ts +++ b/src/components/BlockContentTypes.ts @@ -101,6 +101,7 @@ export type ServiceAmenityType = { imageSrc?: SanityImageAsset title: string description: string + muiIcon?:string } & SanityDocumentFields @@ -635,4 +636,14 @@ export type HeadlineCTASectionType = { insetLeft: string insetRight: string backgroundImgSrc: SanityImageAsset +} + +export type MapSectionType = { + name: string + address: string + latitude: string + longitude: string + contactInfo: ServiceAmenityType[] + mapMarkerTitle: string + mapMarkerLabel: string } \ No newline at end of file diff --git a/src/components/animated/AnimatedPortfolioSection.tsx b/src/components/animated/AnimatedPortfolioSection.tsx index 0a7a21a6..5d3e06d3 100644 --- a/src/components/animated/AnimatedPortfolioSection.tsx +++ b/src/components/animated/AnimatedPortfolioSection.tsx @@ -37,7 +37,7 @@ const AnimatedPortfolioSection: FunctionComponent = (props: IProps) => { } return ( - diff --git a/src/components/animated/MapSection.tsx b/src/components/animated/MapSection.tsx new file mode 100644 index 00000000..66eb59e0 --- /dev/null +++ b/src/components/animated/MapSection.tsx @@ -0,0 +1,161 @@ +import React, {FunctionComponent} from 'react' + +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; +import {Box, Card, CircularProgress, Grid, Typography, useMediaQuery, useTheme} from "@mui/material"; +import {MapSectionType, ServiceAmenityType} from "../BlockContentTypes"; +import {Email, LocationOn, Phone, Rectangle} from "@mui/icons-material"; +import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; +import {COLORS} from "../../theme/common/ColorPalette"; +import {GoogleMap, Marker, useJsApiLoader, Data} from '@react-google-maps/api'; + + +export const useStyles = makeStyles((theme: Theme) => ({ + root: {}, + markerClass: { + paddingTop: "70px", + }, + grayscale: { + // -webkit-filter: grayscale(100%); + // -moz-filter: grayscale(100%); + // -ms-filter: grayscale(100%); + // -o-filter: grayscale(100%); + filter: 'grayscale(100%)', + // filter: url(grayscale.svg); /* Firefox 4+ */ + // filter: gray; /* IE 6-9 */ + } +})) + +interface IProps { + sectionData?: MapSectionType +} + + +const containerStyle = { + width: '100vw', + height: '750px' +}; + +const center = { + lat: 39.332029, + lng: -76.760486 +}; + + +const divStyle = { + background: `white`, + border: `1px solid #ccc`, + padding: 15 +} + +const MapSection: FunctionComponent = (props: IProps) => { + const classes = useStyles() + + const theme = useTheme() + const mdDown = useMediaQuery(theme.breakpoints.down('md')) + + const {isLoaded} = useJsApiLoader({ + id: 'google-map-script', + googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_APIKEY ?? "" + }) + + const getIcon = (iconName?: string) => { + const iconSize = 'medium' + const color = 'secondary' + + switch (iconName) { + case "email": + return + case "phone": + return + case "address": + default: + return + } + } + + + + return ( + + { + isLoaded ? + + + + + + : + } + + + { + props.sectionData?.contactInfo.map((detail: ServiceAmenityType, index) => + + + + + + + { + detail.imageSrc ? + : getIcon(detail.muiIcon) + } + + + + + + + {detail.name} + + + {detail.description} + + + + ) + } + + ) +} + +export default MapSection \ No newline at end of file