misc_pterodactyl-panel/resources/scripts/components/elements/transitions/FadeTransition.tsx

32 lines
858 B
TypeScript
Raw Normal View History

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>
);
};