32 lines
858 B
TypeScript
32 lines
858 B
TypeScript
|
import React from 'react';
|
||
|
|
import { Transition } from '@headlessui/react';
|
||
|
|
|
||
|
|
type Duration = `duration-${number}`;
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
as?: React.ElementType;
|
||
|
|
duration?: Duration | [ Duration, Duration ];
|
||
|
|
show: boolean;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ children, duration, ...props }: Props) => {
|
||
|
|
const [ enterDuration, exitDuration ] = Array.isArray(duration)
|
||
|
|
? duration
|
||
|
|
: (!duration ? [ 'duration-200', 'duration-100' ] : [ duration, duration ]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Transition
|
||
|
|
{...props}
|
||
|
|
enter={`ease-out ${enterDuration}`}
|
||
|
|
enterFrom={'opacity-0'}
|
||
|
|
enterTo={'opacity-100'}
|
||
|
|
leave={`ease-in ${exitDuration}`}
|
||
|
|
leaveFrom={'opacity-100'}
|
||
|
|
leaveTo={'opacity-0'}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Transition>
|
||
|
|
);
|
||
|
|
};
|