57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { MoreVertical, Edit, Trash2 } from 'lucide-react';
|
|
import Button from '../ui/Button';
|
|
|
|
interface PenaltyCardMenuProps {
|
|
onEdit: () => void;
|
|
onVoid: () => void;
|
|
}
|
|
|
|
export default function PenaltyCardMenu({ onEdit, onVoid }: PenaltyCardMenuProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Button
|
|
variant="secondary"
|
|
className="p-2 w-8 h-8"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
|
|
{isOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setIsOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 mt-1 w-32 bg-deep-graphite border border-charcoal-outline rounded-lg shadow-lg z-20">
|
|
<button
|
|
onClick={() => {
|
|
onEdit();
|
|
setIsOpen(false);
|
|
}}
|
|
className="w-full px-3 py-2 text-left text-sm text-white hover:bg-iron-gray/50 flex items-center gap-2"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onVoid();
|
|
setIsOpen(false);
|
|
}}
|
|
className="w-full px-3 py-2 text-left text-sm text-red-400 hover:bg-iron-gray/50 flex items-center gap-2"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
Void
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
} |