diff --git a/app/javascript/components/MetronomeButton.tsx b/app/javascript/components/MetronomeButton.tsx
new file mode 100644
index 0000000..372123e
--- /dev/null
+++ b/app/javascript/components/MetronomeButton.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const MetronomeButton = () => {
+ return (
+
+
+
+ );
+}
+
+export default MetronomeButton
\ No newline at end of file
diff --git a/app/javascript/components/index.tsx b/app/javascript/components/index.tsx
index 9ba60fd..9264120 100644
--- a/app/javascript/components/index.tsx
+++ b/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(
<>
- Yay! You're on Rails!
+
>
);
});
\ No newline at end of file
diff --git a/app/views/songs/show.html.slim b/app/views/songs/show.html.slim
index 7a1d45b..fde186c 100644
--- a/app/views/songs/show.html.slim
+++ b/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)