frontend: Start working on song table

frontend/src/components/App.tsx

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes, useState, useRef, useEffect } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
+import SongTable from './SongTable';
 import classNames from 'classnames';
 import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
 
@@ -37,87 +38,17 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
   );
 };
 
-const SongTable: React.FC = () => {
-  const songs = Array.from({ length: 20 }, (_, index) => `Song ${index + 1}`);
-
-  const SongRow: React.FC<{ song: string }> = ({ song }) => {
-    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
-          setShowDeleteConfirm(false);
-        }
-      };
-
-      if (showDeleteConfirm) {
-        document.addEventListener('click', handleClickOutside);
-      }
-
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-      };
-    }, [showDeleteConfirm]);
-
-    return (
-      <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
-        <div className="flex flex-row gap-2">
-          <button className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded">
-            <FaPlay size={12} />
-          </button>
-        </div>
-
-        <div className="flex-grow min-w-0">
-          <div className="text-white text-md truncate">
-            {song}
-          </div>
-        </div>
-
-        <div className="flex flex-row gap-2">
-          <button
-            ref={buttonRef}
-            className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (showDeleteConfirm) {
-                // Handle delete here
-                console.log('Deleting:', song);
-              } else {
-                setShowDeleteConfirm(true);
-              }
-            }}
-          >
-            {showDeleteConfirm ? 'Delete' : '×'}
-          </button>
-
-
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="flex flex-col w-full h-full overflow-y-auto border-y">
-      {songs.map((song, index) => (
-        <SongRow key={index} song={song} />
-      ))}
-    </div>
-  );
-};
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
-  const [songName, setSongName] = useState('Song Name');
-  const [fileName, setFileName] = useState('Song Name.mp3');
 
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black py-10">
       <div className="bg-violet-900 w-full md:max-w-xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
         <NowPlaying 
           className="flex flex-row md:rounded-t-2xl" 
-          songName={songName} 
+          songName={"Song Name"} 
-          fileName={fileName} 
+          fileName={"Song Name.mp3"} 
           isPlaying={isPlaying} 
           onPlayPause={() => setIsPlaying(!isPlaying)} 
           onStepForward={() => {}} 

frontend/src/components/SongTable.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FaPlay } from 'react-icons/fa';
+
+const SongRow: React.FC<{ song: string }> = ({ song }) => {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        setShowDeleteConfirm(false);
+      }
+    };
+    
+    if (showDeleteConfirm) {
+      document.addEventListener('click', handleClickOutside);
+    }
+    
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [showDeleteConfirm]);
+  
+  return (
+    <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
+      <div className="flex flex-row gap-2">
+        <button className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded">
+          <FaPlay size={12} />
+        </button>
+      </div>
+      
+      <div className="flex-grow min-w-0">
+        <div className="text-white text-md truncate">
+          {song}
+        </div>
+      </div>
+      
+      <div className="flex flex-row gap-2">
+        <button
+          ref={buttonRef}
+          className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (showDeleteConfirm) {
+              // Handle delete here
+              console.log('Deleting:', song);
+            } else {
+              setShowDeleteConfirm(true);
+            }
+          }}
+        >
+          {showDeleteConfirm ? 'Delete' : '×'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const SongTable: React.FC = () => {
+  const songs = Array.from({ length: 20 }, (_, index) => `Song ${index + 1}`);
+  
+  return (
+    <div className="flex flex-col w-full h-full overflow-y-auto border-y">
+      {songs.map((song, index) => (
+        <SongRow key={index} song={song} />
+      ))}
+    </div>
+  );
+};
+
+export default SongTable;