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)