frontend: add AddSongPanel

2025-02-15 15:22:07 -08:00
parent 623c3804d6
commit 9c4981b9cb
5 changed files with 203 additions and 103 deletions
--- a/frontend/src/components/SongRow.tsx
+++ b/frontend/src/components/SongRow.tsx
@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FaPlay } from 'react-icons/fa';
+
+interface SongRowProps {
+  song: string;
+  onDelete: () => void;
+  onPlay: () => void;
+}
+
+const SongRow: React.FC<SongRowProps> = ({ song, onDelete, onPlay }) => {
+  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"
+          onClick={onPlay}
+        >
+          <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) {
+              setShowDeleteConfirm(false);
+              onDelete();
+            } else {
+              setShowDeleteConfirm(true);
+            }
+          }}
+        >
+          {showDeleteConfirm ? 'Delete' : '×'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SongRow;