feat: add ActorPopover component with floating-ui

2026-03-28 13:19:29 +01:00
parent ad014c2547
commit ac5bd38954
1 changed files with 40 additions and 0 deletions
--- a/assets/react/controllers/ActorPopover.jsx
+++ b/assets/react/controllers/ActorPopover.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';
+
+export default function ActorPopover({ actorName }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [offset(8), flip(), shift()],
+        placement: 'top',
+    });
+
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+    return (
+        <>
+            <button
+                ref={refs.setReference}
+                {...getReferenceProps()}
+                className="popover-trigger"
+                type="button"
+            >
+                ?
+            </button>
+            {isOpen && (
+                <div
+                    ref={refs.setFloating}
+                    style={floatingStyles}
+                    {...getFloatingProps()}
+                    className="actor-popover"
+                >
+                    <strong>{actorName}</strong>
+                </div>
+            )}
+        </>
+    );
+}