ephcoding
diff --git a/‎app/components/BackgroundMap.jsx‎
Lines changed: 37 additions & 0 deletions b/‎app/components/BackgroundMap.jsx‎
Lines changed: 37 additions & 0 deletions
diff --git a/‎app/components/Footer.js‎ renamed to ‎app/components/Footer.jsx‎ b/‎app/components/Footer.js‎ renamed to ‎app/components/Footer.jsx‎
diff --git a/‎app/components/Header.js‎ renamed to ‎app/components/Header.jsx‎ b/‎app/components/Header.js‎ renamed to ‎app/components/Header.jsx‎
diff --git a/‎app/components/SavageLogo.js‎ renamed to ‎app/components/SavageLogo.jsx‎ b/‎app/components/SavageLogo.js‎ renamed to ‎app/components/SavageLogo.jsx‎
diff --git a/‎app/components/index.js‎
Lines changed: 1 addition & 0 deletions b/‎app/components/index.js‎
Lines changed: 1 addition & 0 deletions
@@ -0,0 +1,37 @@
+"use client";
+import * as topojson from "topojson-client";
+import { geoPath, geoNaturalEarth1 } from "d3";
+import WorldAtlasTopo from "../data/world-atlas.topo.json";
+import WorldAtlasLand from "../data/world-atlas-land.geo.json";
+import WorldAtlasCountries from "../data/world-atlas-countries.geo.json";
+
+export const BackgroundMap = () => {
+	const projection = geoNaturalEarth1();
+	const d3Path = geoPath(projection);
+	const { features } = topojson.feature(
+		WorldAtlasTopo,
+		WorldAtlasTopo.objects.countries
+	);
+
+	console.log(features);
+
+	return (
+		<div className='bg-neutral-700'>
+			<svg viewBox='-5 -15 975 540' xmlns='http://www.w3.org/2000/svg'>
+				<g>
+					{features &&
+						features.map(({ id, geometry }) => (
+							<path
+								key={id}
+								d={d3Path(geometry)}
+								stroke='black'
+								fill='none'
+								className='hover:fill-red-500'
+							/>
+						))}
+				</g>
+				{/* <path d={d3Path(features)} stroke='black' fill='grey' /> */}
+			</svg>
+		</div>
+	);
+};
@@ -1,3 +1,4 @@
+export * from "./BackgroundMap";
 export * from "./Footer";
 export * from "./Header";
 export * from "./SavageLogo";