41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import React, { useMemo } from "react";
|
|
import { useSelectionContext } from "../useSelection";
|
|
|
|
type AddressHighlighterProps = React.PropsWithChildren<{
|
|
address: string;
|
|
}>;
|
|
|
|
const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
|
|
address,
|
|
children,
|
|
}) => {
|
|
const [selection, setSelection] = useSelectionContext();
|
|
const [select, deselect] = useMemo(() => {
|
|
const _select = () => {
|
|
setSelection({ type: "address", content: address });
|
|
};
|
|
const _deselect = () => {
|
|
setSelection(null);
|
|
};
|
|
return [_select, _deselect];
|
|
}, [setSelection, address]);
|
|
|
|
return (
|
|
<div
|
|
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
|
|
selection !== null &&
|
|
selection.type === "address" &&
|
|
selection.content === address
|
|
? "border-orange-400 bg-yellow-100"
|
|
: "border-transparent"
|
|
}`}
|
|
onMouseEnter={select}
|
|
onMouseLeave={deselect}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AddressHighlighter);
|