71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
|
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;
|