41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|