feat: setup Amcharts map

package.json

@@ -21,6 +21,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@amcharts/amcharts5": "^5.8.7",
+    "@amcharts/amcharts5-geodata": "^5.1.2",
     "@anatoliygatt/dark-mode-toggle": "^1.0.1",
     "@cyberblast/react-wordcloud": "^1.2.9",
     "@emotion/react": "^11.11.4",

src/app/about/travel/page.tsx

@@ -0,0 +1,10 @@
+import Travel from '@/components/organisms/about/Travel';
+
+export const metadata = {
+  title: 'About - Travel | MartaCodes.it',
+  description: 'My adventures around the world',
+};
+
+export default async function Page() {
+  return <Travel />;
+}

src/components/organisms/about/Travel.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import * as am5 from '@amcharts/amcharts5';
+import * as am5map from '@amcharts/amcharts5/map';
+import Am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow';
+import { useLayoutEffect } from 'react';
+
+const Travel = () => {
+  useLayoutEffect(() => {
+    const root = am5.Root.new('chartdiv');
+
+    root.setThemes([Am5themes_Animated.new(root)]);
+
+    const chart = root.container.children.push(
+      am5map.MapChart.new(root, {
+        projection: am5map.geoNaturalEarth1(),
+        // minZoomLevel: 1,
+        // maxZoomLevel: 16
+        // zoomStep: 1,
+        homeZoomLevel: 2,
+        homeGeoPoint: { longitude: 9, latitude: 45 },
+        // wheelSensitivity: 0.5
+      }),
+    );
+
+    chart.set('zoomControl', am5map.ZoomControl.new(root, {}));
+
+    const polygonSeries = chart.series.push(
+      am5map.MapPolygonSeries.new(root, {
+        geoJSON: am5geodata_worldLow,
+        exclude: ['AQ'],
+      }),
+    );
+
+    polygonSeries.events.on('datavalidated', function () {
+      chart.goHome();
+    });
+
+    return () => {
+      root.dispose();
+    };
+  }, []);
+
+  return (
+    <>
+      <div id='chartdiv' className='w-full h-[400px]'></div>
+    </>
+  );
+};
+
+export default Travel;

src/components/pages/about-page.tsx

@@ -10,6 +10,7 @@ import Books from '@/components/organisms/about/Books';
 import Music from '@/components/organisms/about/Music';
 import Podcasts from '@/components/organisms/about/Podcasts';
 import RandomFacts from '@/components/organisms/about/RandomFacts';
+import Travel from '@/components/organisms/about/Travel';
 import TvSeries from '@/components/organisms/about/TvSeries';
 import VideoGames from '@/components/organisms/about/VideoGames';
 
@@ -111,6 +112,8 @@ export default function AboutPage({
           falseOption={randomFactsData.falseOption}
           trueFacts={randomFactsData.trueFacts}
         />
+
+        <Travel />
       </div>
     </section>
   );