change into React Metronome Button

app/javascript/components/MetronomeButton.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const MetronomeButton = () => {
+  return (
+    <div>
+      <button className='btn btn-primary'>
+        Start metronome for the song
+      </button>
+    </div>
+  );
+}
+
+export default MetronomeButton

app/javascript/components/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import MetronomeButton from "./MetronomeButton";
 
 const metronome_container = document.getElementById("metronome-button");
 
@@ -12,7 +13,7 @@ const metronome_root = createRoot(metronome_container);
 document.addEventListener("DOMContentLoaded", () => {
   metronome_root.render(
     <>
-      <p className="font-bold">Yay! You're on Rails!</p>
+      <MetronomeButton />
     </>
   );
 });

app/views/songs/show.html.slim

@@ -26,13 +26,8 @@
           p
             strong Tempo:
             = @song.tempo.to_s + ' BPM'
-            #metronome-button
+            = tag.div id: 'metronome-button', data: {tempo: @song.tempo}
 
-            div[data-controller='metronome']
-              input[type="hidden" data-metronome-target="bpm" value="#{@song.tempo}"]
-              input[type="hidden" data-metronome-target="sound" value="#{audio_path('drumsticks.mp3')}"]
-              = button_tag '', type: 'button', data: { action: 'metronome#handleClick' }, class: 'btn btn-primary'
-                span[data-metronome-target='tempoButton'] Start metronome for the song
           div
             strong Lyric:
             =< simple_format(@song.lyric)