frontend: add AddSongPanel

frontend/src/components/NowPlaying.tsx

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
+
+interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
+  songName: string;
+  fileName: string;
+  isPlaying: boolean;
+  onPlayPause: () => void;
+  onStepForward: () => void;
+  onStepBackward: () => void; 
+}
+
+const NowPlaying: React.FC<NowPlayingProps> = (props) => {
+  return (
+    <div className={classNames(props.className, 'bg-violet-100/50 h-[150px] p-5')}>
+      <div className="flex flex-col w-full gap-2">
+        <div className="flex flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center">
+          <div className="flex-grow">
+            <div className="text-white text-lg font-bold">{props.songName}</div>
+            <div className="text-white text-sm">{props.fileName}</div>
+          </div>
+          <div className="flex flex-row gap-4">
+            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepBackward}>
+              <FaStepBackward size={24} />
+            </button>
+            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
+              {props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
+            </button>
+            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepForward}>
+              <FaStepForward size={24} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NowPlaying;