Initial commit

Lts/Tools/rme-playback/frontend/src/components/dashboard/ReplayRow.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Replay } from "../../types/replay";
+import { ActionButton } from "./ActionButton";
+
+interface ReplayRowProps {
+    replay: Replay;
+    onView: (uuid: string) => void;
+    onDelete: (uuid: string) => void;
+}
+
+const ReplayRow: React.FC<ReplayRowProps> = ({ replay, onView, onDelete }) => {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const openDialog = () => setIsDialogOpen(true);
+    const closeDialog = () => setIsDialogOpen(false);
+
+    return (
+        <>
+            <tr className="border-b hover:bg-gray-100">
+                <td className="py-3 px-4">{replay.name}</td>
+                <td className="py-3 px-4">{replay.uuid}</td>
+                <td className="py-3 px-4">{replay.created_by}</td>
+                <td className="py-3 px-4">{new Date(replay.time_created * 1000).toLocaleString()}</td>
+                <td className="py-3 px-4 flex gap-2">
+                    <ActionButton color="blue" onClick={() => onView(replay.uuid)}>
+                        View
+                    </ActionButton>
+                    <ActionButton color="red" onClick={() => onDelete(replay.uuid)}>
+                        Delete
+                    </ActionButton>
+                    <ActionButton color="yellow" onClick={() => openDialog()}>
+                        Details
+                    </ActionButton>
+                </td>
+            </tr>
+
+            {isDialogOpen && (
+                <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-50">
+                    <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full z-10">
+                        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Replay Details</h2>
+                        <div className="space-y-2 text-gray-700">
+                            <p><strong className="font-medium">Name:</strong> {replay.name}</p>
+                            <p><strong className="font-medium">UUID:</strong> {replay.uuid}</p>
+                            <p><strong className="font-medium">Created By:</strong> {replay.created_by}</p>
+                            <p><strong className="font-medium">Time Created:</strong> {new Date(replay.time_created * 1000).toLocaleString()}</p>
+                        </div>
+                        <div className="mt-6 flex justify-end">
+                            <ActionButton color="red" onClick={closeDialog}>
+                                Close
+                            </ActionButton>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}
+export default ReplayRow;