v1 feature: added playlists

src/components/ConfirmModal.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface ConfirmModalProps {
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmModal(
+  { message, confirmLabel = "Delete", onConfirm, onCancel }: ConfirmModalProps,
+) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+
+  return createPortal(
+    <div className="modal-backdrop" onClick={onCancel}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <p className="confirm-modal-message">{message}</p>
+        <div className="confirm-modal-actions">
+          <button type="button" onClick={onCancel}>Cancel</button>
+          <button type="button" className="btn-danger" onClick={onConfirm}>
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}