Add initial lyrics search UI

2026-05-06 20:10:12 +02:00 · 2023-06-08 03:40:58 -07:00
parent 0fa5b6496f
commit 14a6766072
3 changed files with 257 additions and 30 deletions
@@ -0,0 +1,51 @@
+import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
+import { Button, NumberInput } from '/@/renderer/components';
+import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
+import { useCurrentSong } from '/@/renderer/store';
+
+export const LyricsActions = () => {
+  const currentSong = useCurrentSong();
+
+  return (
+    <>
+      <Button
+        variant="default"
+        onClick={() =>
+          openLyricSearchModal({
+            artist: currentSong?.artistName,
+            name: currentSong?.name,
+          })
+        }
+      >
+        Search
+      </Button>
+      <Button
+        tooltip={{ label: 'Decrease offset', openDelay: 500 }}
+        variant="default"
+      >
+        <RiSubtractFill />
+      </Button>
+      <NumberInput
+        styles={{ input: { textAlign: 'center' } }}
+        width={55}
+      />
+      <Button
+        tooltip={{ label: 'Increase offset', openDelay: 500 }}
+        variant="default"
+      >
+        <RiAddFill />
+      </Button>
+      <Button
+        variant="default"
+        onClick={() =>
+          openLyricSearchModal({
+            artist: currentSong?.artistName,
+            name: currentSong?.name,
+          })
+        }
+      >
+        Clear
+      </Button>
+    </>
+  );
+};