61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useFloating, useClick, useDismiss, useInteractions, offset, shift, size } from '@floating-ui/react';
|
|
|
|
const HINT_ICONS = {
|
|
film: 'fa-solid fa-film',
|
|
character: 'fa-solid fa-masks-theater',
|
|
award: 'fa-solid fa-trophy',
|
|
};
|
|
|
|
export default function ActorPopover({ hintType, hintText }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const { refs, floatingStyles, context } = useFloating({
|
|
open: isOpen,
|
|
onOpenChange: setIsOpen,
|
|
middleware: [
|
|
offset(8),
|
|
size({
|
|
apply({ availableWidth, elements }) {
|
|
Object.assign(elements.floating.style, {
|
|
maxWidth: `${availableWidth - 16}px`,
|
|
});
|
|
},
|
|
}),
|
|
shift({ padding: 8 }),
|
|
],
|
|
placement: 'left',
|
|
});
|
|
|
|
const click = useClick(context);
|
|
const dismiss = useDismiss(context);
|
|
const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
|
|
|
|
if (!hintText) return null;
|
|
|
|
const iconClass = HINT_ICONS[hintType] || 'fa-solid fa-circle-question';
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
ref={refs.setReference}
|
|
{...getReferenceProps()}
|
|
className="popover-trigger"
|
|
type="button"
|
|
>
|
|
<i className={iconClass}></i>
|
|
</button>
|
|
{isOpen && (
|
|
<div
|
|
ref={refs.setFloating}
|
|
style={floatingStyles}
|
|
{...getFloatingProps()}
|
|
className="actor-popover"
|
|
>
|
|
{hintText}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|