9199c79186
* chore: ui tweaks to select market panel * chore: add close button to popover/select market panel * fix: fixing broken styling on cell data * chore: tweaked styling for fees tooltip * Revert "chore: tweaked styling for fees tooltip" This reverts commit 3f1a34d835eb0cbea82847e37e66c5a4c8bf723d. * chore: changing text case * feat: adjust styles to align with petes changes * feat: readd sticky table headers * chore: linting fixes Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
import { Icon } from '../icon';
|
|
|
|
export interface PopoverProps extends PopoverPrimitive.PopoverProps {
|
|
trigger: React.ReactNode | string;
|
|
children: React.ReactNode;
|
|
open?: boolean;
|
|
onChange?: (open: boolean) => void;
|
|
}
|
|
|
|
export const Popover = ({
|
|
trigger,
|
|
children,
|
|
open,
|
|
onChange,
|
|
}: PopoverProps) => {
|
|
return (
|
|
<PopoverPrimitive.Root open={open} onOpenChange={(x) => onChange?.(x)}>
|
|
<PopoverPrimitive.Trigger data-testid="popover-trigger">
|
|
{trigger}
|
|
</PopoverPrimitive.Trigger>
|
|
<PopoverPrimitive.Portal>
|
|
<PopoverPrimitive.Content
|
|
data-testid="popover-content"
|
|
align="start"
|
|
className="p-4 rounded bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200"
|
|
sideOffset={10}
|
|
>
|
|
<PopoverPrimitive.Close
|
|
className="px-4 py-2 absolute top-0 right-0"
|
|
data-testid="dialog-close"
|
|
>
|
|
<Icon name="cross" />
|
|
</PopoverPrimitive.Close>
|
|
{children}
|
|
</PopoverPrimitive.Content>
|
|
</PopoverPrimitive.Portal>
|
|
</PopoverPrimitive.Root>
|
|
);
|
|
};
|