|
|
@ -8,6 +8,7 @@ export type SlideOutEnterFrom = 'end' | 'start';
|
|
|
|
|
|
|
|
|
|
|
|
type Props = Readonly<{
|
|
|
|
type Props = Readonly<{
|
|
|
|
children: React.ReactNode;
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
|
|
|
className: string;
|
|
|
|
enterFrom?: SlideOutEnterFrom;
|
|
|
|
enterFrom?: SlideOutEnterFrom;
|
|
|
|
isShown?: boolean;
|
|
|
|
isShown?: boolean;
|
|
|
|
onClose?: () => void;
|
|
|
|
onClose?: () => void;
|
|
|
@ -40,6 +41,7 @@ const enterFromClasses: Record<
|
|
|
|
|
|
|
|
|
|
|
|
export default function SlideOut({
|
|
|
|
export default function SlideOut({
|
|
|
|
children,
|
|
|
|
children,
|
|
|
|
|
|
|
|
className,
|
|
|
|
enterFrom = 'end',
|
|
|
|
enterFrom = 'end',
|
|
|
|
isShown = false,
|
|
|
|
isShown = false,
|
|
|
|
size,
|
|
|
|
size,
|
|
|
@ -50,7 +52,10 @@ export default function SlideOut({
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Transition.Root as={Fragment} show={isShown}>
|
|
|
|
<Transition.Root as={Fragment} show={isShown}>
|
|
|
|
<Dialog as="div" className="relative z-40" onClose={() => onClose?.()}>
|
|
|
|
<Dialog
|
|
|
|
|
|
|
|
as="div"
|
|
|
|
|
|
|
|
className={clsx('relative z-40', className)}
|
|
|
|
|
|
|
|
onClose={() => onClose?.()}>
|
|
|
|
<Transition.Child
|
|
|
|
<Transition.Child
|
|
|
|
as={Fragment}
|
|
|
|
as={Fragment}
|
|
|
|
enter="transition-opacity ease-linear duration-300"
|
|
|
|
enter="transition-opacity ease-linear duration-300"
|
|
|
|