wip

apps/website/components/leagues/PenaltyCardMenu.tsx

@@ -0,0 +1,57 @@
+'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>
+  );
+}