69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Sign } from '../types/sign';
|
|
|
|
interface Props {
|
|
sign: Sign;
|
|
deleteSign: (id: number) => void;
|
|
}
|
|
|
|
const SignComponent: React.FC<Props> = ({ sign, deleteSign }) => {
|
|
const navigate = useNavigate();
|
|
|
|
const [showDeletePopup, setShowDeletePopup] = useState(false);
|
|
|
|
const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
|
|
e.preventDefault();
|
|
navigate(`/admin/signs/${sign.id}`);
|
|
};
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setShowDeletePopup(true);
|
|
};
|
|
|
|
const handleConfirmDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
deleteSign(sign.id);
|
|
setShowDeletePopup(false);
|
|
};
|
|
|
|
const handleCancelDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setShowDeletePopup(false);
|
|
};
|
|
|
|
return (
|
|
<div className="relative bg-white p-6 rounded-lg shadow-md" onClick={onClick}>
|
|
{showDeletePopup && (
|
|
<div className="fixed inset-0 bg-gray-700 bg-opacity-50 flex justify-center items-center z-10">
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<p className="text-lg font-medium mb-4">Are you sure you want to delete this sign?</p>
|
|
<div className="flex justify-end">
|
|
<button className="bg-gray-500 text-white px-4 py-2 rounded-md mr-2" onClick={handleCancelDeleteClick}>
|
|
Cancel
|
|
</button>
|
|
<button className="bg-red-500 text-white px-4 py-2 rounded-md" onClick={handleConfirmDeleteClick}>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<button className="absolute top-2 right-2" onClick={handleDeleteClick}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-2xl font-medium">{sign.name}</h1>
|
|
<p className="text-lg font-medium">Total video's: {sign.sign_videos.length}</p>
|
|
<p className="text-lg font-medium">Approved video's: {sign.sign_videos.filter((t) => t.approved).length}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SignComponent;
|