diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx new file mode 100644 index 0000000..61e3022 --- /dev/null +++ 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 ( + <> + + {isOpen && ( +