58 lines
2.6 KiB
TypeScript
Executable File
58 lines
2.6 KiB
TypeScript
Executable File
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; |