diff --git a/components/Map/index.js b/components/Map/index.js new file mode 100644 index 00000000..f586e3a9 --- /dev/null +++ b/components/Map/index.js @@ -0,0 +1,7 @@ +import dynamic from "next/dynamic"; + +const Map = dynamic(() => import("./map"), { + ssr: false, +}); + +export default Map; diff --git a/components/Map/map.js b/components/Map/map.js new file mode 100644 index 00000000..bdb14b19 --- /dev/null +++ b/components/Map/map.js @@ -0,0 +1,77 @@ +import Image from "next/image"; +import "leaflet/dist/leaflet.css"; +import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; +import { divIcon } from "leaflet"; + +import location from "../../public/img/location.svg"; +import calender from "../../public/img/calender.svg"; +import Paragraph from "../Typography/paragraph"; +import { useMemo } from "react"; + +const Map = ({ latitude, longitude, address, date, place }) => { + const center = useMemo(() => [latitude, longitude], []); + const customIcon = divIcon({ + html: ` + + + + + + + + + + `, + popupAnchor: [180, 236], + }); + return ( + + + + +
+
+ location + + {address} + +
+
+ location + + {date} + +
+
+ + + + ); +}; + +export default Map; diff --git a/package-lock.json b/package-lock.json index 123cabf6..448d51d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^0.27.2", "d3": "^7.8.5", + "leaflet": "^1.9.4", "next": "12.1.6", "react": "18.1.0", "react-countdown": "^2.3.5", @@ -17,6 +18,7 @@ "react-ga": "^3.3.1", "react-globe.gl": "^2.24.2", "react-gtm-module": "^2.0.11", + "react-leaflet": "^4.2.1", "react-responsive": "^9.0.0", "react-slick": "^0.29.0", "react-youtube-embed": "^1.0.3", @@ -363,6 +365,16 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -932,9 +944,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001341", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz", - "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==", + "version": "1.0.30001522", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz", + "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==", "funding": [ { "type": "opencollective", @@ -943,6 +955,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -3083,6 +3099,11 @@ "language-subtag-registry": "~0.3.2" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3814,6 +3835,19 @@ "react": ">=16.13.1" } }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-responsive": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0.tgz", @@ -4865,6 +4899,12 @@ "tslib": "^2.4.0" } }, + "@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "requires": {} + }, "@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -5267,9 +5307,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001341", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz", - "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==" + "version": "1.0.30001522", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz", + "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==" }, "chalk": { "version": "4.1.2", @@ -6832,6 +6872,11 @@ "language-subtag-registry": "~0.3.2" } }, + "leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -7321,6 +7366,14 @@ "jerrypick": "^1.1.1" } }, + "react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "requires": { + "@react-leaflet/core": "^2.1.0" + } + }, "react-responsive": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0.tgz", diff --git a/package.json b/package.json index 27db07b7..a937d42d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "axios": "^0.27.2", "d3": "^7.8.5", + "leaflet": "^1.9.4", "next": "12.1.6", "react": "18.1.0", "react-countdown": "^2.3.5", @@ -22,6 +23,7 @@ "react-ga": "^3.3.1", "react-globe.gl": "^2.24.2", "react-gtm-module": "^2.0.11", + "react-leaflet": "^4.2.1", "react-responsive": "^9.0.0", "react-slick": "^0.29.0", "react-youtube-embed": "^1.0.3", diff --git a/pages/venue/[id].js b/pages/venue/[id].js index b034547d..590c43e1 100644 --- a/pages/venue/[id].js +++ b/pages/venue/[id].js @@ -1,173 +1,190 @@ /* eslint-disable react/no-unescaped-entities */ -import React, { useState } from 'react'; -import cities from '../../config/city-lists.json'; -import Button from '../../components/Buttons/button'; -import Heading from '../../components/Typography/heading'; -import Paragraph from '../../components/Typography/paragraph'; -import Agenda from '../../components/Agenda/agenda'; -import Speaker from '../../components/Speaker/speaker'; -import speakers from '../../config/speakers.json'; -import Sponsors from '../../components/Sponsors/sponsors'; -import { useRouter } from 'next/router'; +import React, { useState } from "react"; +import cities from "../../config/city-lists.json"; +import citiess from "..//../config/cities.json"; +import Button from "../../components/Buttons/button"; +import Heading from "../../components/Typography/heading"; +import Paragraph from "../../components/Typography/paragraph"; +import Agenda from "../../components/Agenda/agenda"; +import Speaker from "../../components/Speaker/speaker"; +import Map from "../../components/Map"; +import speakers from "../../config/speakers.json"; +import Sponsors from "../../components/Sponsors/sponsors"; +import { useRouter } from "next/router"; const tabs = [ - { - title: 'Agenda', - }, + { + title: "Agenda", + }, - { - title: 'Speakers', - }, - { - title: 'Sponsors', - }, + { + title: "Speakers", + }, + { + title: "Sponsors", + }, ]; export async function getStaticProps({ params }) { - let res = {}; - const data = cities.filter((p) => p.name === params.id); - res = data[0]; - const getSpeakers = speakers.filter((s) => s.city === res?.name); - res.speakers = getSpeakers[0].lists; - return { - props: { - city: res, - }, - }; + let res = {}; + const data = cities.filter((p) => p.name === params.id); + res = data[0]; + const getSpeakers = speakers.filter((s) => s.city === res?.name); + res.speakers = getSpeakers[0].lists; + const getCoordinates = citiess.features.filter( + (c) => c.properties.name === params.id + ); + + res.longitude = getCoordinates[0].properties.longitude; + res.latitude = getCoordinates[0].properties.latitude; + return { + props: { + city: res, + }, + }; } export async function getStaticPaths() { - const paths = cities.map((city) => ({ - params: { id: city.name }, - })); - return { - paths, - fallback: false, - }; + const paths = cities.map((city) => ({ + params: { id: city.name }, + })); + return { + paths, + fallback: false, + }; } function Venue({ city }) { - const router = useRouter(); - const [active, setActive] = useState(tabs[0].title); - return ( -
-
-
-
- - {city.name}, {city.country} - - {city.description} + const router = useRouter(); + const [active, setActive] = useState(tabs[0].title); + return ( +
+
+
+
+ + {city.name}, {city.country} + + {city.description} - - {city.address} - - - {city.date} - -
-
-
-
-
- {tabs.map((tab) => { - return ( -
{ - setActive(tab.title); - }} - > - -
- ); - })} -
-
-
-
-
-
-
-
- -
-
-
-
-
-
- Speakers - - Meet Our Expert Speakers - -
- {typeof city.speakers === 'string' ? ( -
-
- - Speakers To Be Announced Soon - Stay Tuned! - -
-
- ) : Object.keys(city.speakers).length > 0 ? ( -
- {city.speakers.map((speaker, i) => { - return ( - - ); - })} -
- ) : ( -
- - Speakers Coming Soon - Stay Tuned! - - - We are actively accepting speaker applications, and you can - start your journey by clicking the button below. Join us on - stage and share your valuable insights with our enthusiastic - audience! - - -
- )} -
-
-
-
- -
-
- ); + + {city.address} + + + {city.date} + +
+
+
+
+
+ {tabs.map((tab) => { + return ( +
{ + set`Active`(tab.title); + }} + > + +
+ ); + })} +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ Speakers + + Meet Our Expert Speakers + +
+ {typeof city.speakers === "string" ? ( +
+
+ + Speakers To Be Announced Soon - Stay Tuned! + +
+
+ ) : Object.keys(city.speakers).length > 0 ? ( +
+ {city.speakers.map((speaker, i) => { + return ( + + ); + })} +
+ ) : ( +
+ + Speakers Coming Soon - Stay Tuned! + + + We are actively accepting speaker applications, and you can + start your journey by clicking the button below. Join us on + stage and share your valuable insights with our enthusiastic + audience! + + +
+ )} +
+
+
+
+ +
+
+ +
+
+ ); } export default Venue; diff --git a/public/img/calender.svg b/public/img/calender.svg new file mode 100644 index 00000000..dcb03b81 --- /dev/null +++ b/public/img/calender.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/location.svg b/public/img/location.svg new file mode 100644 index 00000000..e9c118ef --- /dev/null +++ b/public/img/location.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/styles/globals.css b/styles/globals.css index 852620cf..6c4baa87 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -265,3 +265,20 @@ mix-blend-mode: lighten; 0% {transform: translateX(0)} 100% {transform: translateX(200%)} } + +/* Map styles */ +.leaflet-container { + height: 44rem; +} + +.request-popup .leaflet-popup-content-wrapper { + background-image: linear-gradient(225deg, #2dccfd 0%, #ad20e2 100%); + border-radius: 0.5rem; + width: 17.5rem; + box-sizing: border-box; + padding: 0rem; +} + +.leaflet-popup-tip-container { + display: none; +} \ No newline at end of file