imported RhythmCodeIcon into DotMap component

ManSangSin · Oct 18, 2023 · 3a675a4 · 3a675a4
1 parent 9d4e58a
commit 3a675a4
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/client/src/components/DotMap.js b/client/src/components/DotMap.js
@@ -1,7 +1,12 @@
 import "./DotMap.css";
-import MyMap from "./MyMap";
+import RhythmCodeIcon from "./RhythmCodeIcon";
 
-export default function DotMap() {
+export default function DotMap({
+	rhythmCodes,
+	rhythmsList,
+	setModalOpen,
+	setSelectedRhythm,
+}) {
 	return (
 		<svg
 			id="dotmap"
@@ -16615,7 +16620,17 @@ export default function DotMap() {
 				d="m2145.1,838.29c3,0,5.42,2.42,5.42,5.42s-2.43,5.43-5.42,5.43-5.42-2.43-5.42-5.43c0-3,2.43-5.42,5.42-5.42Z"
 			/>
 			<foreignObject width="100%" height="100%" x="-10" y="-10">
-				<MyMap />
+				{rhythmCodes.map((rhythmCodeObject) => (
+					<RhythmCodeIcon
+						key={rhythmCodeObject.rhythm_code}
+						rhythmCodeName={rhythmCodeObject.rhythm_code}
+						rhythmsList={rhythmsList}
+						toppx={rhythmCodeObject.toppx}
+						leftpx={rhythmCodeObject.leftpx}
+						setModalOpen={setModalOpen}
+						setSelectedRhythm={setSelectedRhythm}
+					/>
+				))}
 			</foreignObject>
 		</svg>
 	);