frontend: basic skeleton

frontend/src/components/App.tsx

@@ -0,0 +1,132 @@
+import React, { HTMLAttributes, useState, useRef, useEffect } 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>
+  );
+};
+
+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} 
+          fileName={fileName} 
+          isPlaying={isPlaying} 
+          onPlayPause={() => setIsPlaying(!isPlaying)} 
+          onStepForward={() => {}} 
+          onStepBackward={() => {}} 
+        />
+        <SongTable />
+      </div>
+    </div>
+  );
+};
+
+export default App;

frontend/src/components/index.tsx

@@ -0,0 +1 @@
+export { default as App } from './App';