Wojtek
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
import * as Dialog from '@radix-ui/react-dialog';
|
|
import { tv } from 'tailwind-variants';
|
|
import { Overlay } from './Overlay';
|
|
|
|
import type { ComponentPropsWithRef, ElementRef } from 'react';
|
|
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#root
|
|
*/
|
|
export const Root = Dialog.Root;
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#portal
|
|
*/
|
|
export const Portal = Dialog.Portal;
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#trigger
|
|
*/
|
|
export const Trigger = Dialog.Trigger;
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#description
|
|
*/
|
|
export const Title = Dialog.Title;
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#description
|
|
*/
|
|
export const Description = Dialog.Description;
|
|
/**
|
|
* @see https://www.radix-ui.com/docs/primitives/components/dialog#close
|
|
*/
|
|
export const Close = Dialog.Close;
|
|
|
|
export const positions = ['top', 'right', 'bottom', 'left'] as const;
|
|
type Position = (typeof positions)[number];
|
|
|
|
const content = tv({
|
|
base: 'z-20 fixed bg-white rounded-lg',
|
|
variants: {
|
|
position: {
|
|
top: 'top-2 left-2 right-2 h-72 ',
|
|
right: 'top-2 bottom-2 right-2 w-72',
|
|
bottom: 'bottom-2 left-2 right-2 h-72',
|
|
left: 'top-2 bottom-2 left-2 w-72',
|
|
},
|
|
},
|
|
});
|
|
|
|
type ContentProps = ComponentPropsWithRef<typeof Dialog.Content> & {
|
|
position: Position;
|
|
};
|
|
export const Content = forwardRef<ElementRef<typeof Dialog.Content>, ContentProps>(function Content(
|
|
{ children, className, position = 'right', ...other },
|
|
forwardedRef,
|
|
) {
|
|
return (
|
|
<Dialog.Portal>
|
|
<Overlay />
|
|
<Dialog.Content {...other} className={twMerge(content({ position }), className)} ref={forwardedRef}>
|
|
{children}
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
);
|
|
});
|