2022-07-23 04:20:08 -07:00
|
|
|
import { Transition } from '@headlessui/react'
|
|
|
|
import { CSSProperties, ReactNode } from 'react'
|
|
|
|
|
2022-09-29 21:21:23 -07:00
|
|
|
const transitionEnterStyle = 'transition-all ease-out duration-500'
|
|
|
|
const transitionExitStyle = 'transition-all ease-in duration-300'
|
2022-07-23 04:20:08 -07:00
|
|
|
|
|
|
|
export const EnterRightExitLeft = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
show,
|
|
|
|
style,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
show: boolean
|
|
|
|
style?: CSSProperties
|
|
|
|
}) => (
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
className={className}
|
|
|
|
show={show}
|
|
|
|
enter={transitionEnterStyle}
|
2022-08-16 15:58:03 -07:00
|
|
|
enterFrom="translate-x-full"
|
|
|
|
enterTo="translate-x-0"
|
2022-07-23 04:20:08 -07:00
|
|
|
leave={transitionExitStyle}
|
2022-08-16 15:58:03 -07:00
|
|
|
leaveFrom="translate-x-0"
|
|
|
|
leaveTo="-translate-x-full"
|
2022-07-23 04:20:08 -07:00
|
|
|
style={style}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Transition>
|
|
|
|
)
|
|
|
|
|
|
|
|
export const EnterBottomExitBottom = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
show,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
show: boolean
|
|
|
|
}) => (
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
2022-08-16 04:23:43 -07:00
|
|
|
className={`thin-scroll ${className}`}
|
2022-07-23 04:20:08 -07:00
|
|
|
show={show}
|
|
|
|
enter={transitionEnterStyle}
|
|
|
|
enterFrom="max-h-0"
|
|
|
|
enterTo="max-h-full"
|
|
|
|
leave={transitionExitStyle}
|
|
|
|
leaveFrom="max-h-full"
|
|
|
|
leaveTo="max-h-0"
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Transition>
|
|
|
|
)
|
|
|
|
|
|
|
|
export const FadeInFadeOut = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
show,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
className?: string
|
|
|
|
show: boolean
|
|
|
|
}) => (
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
className={className}
|
|
|
|
show={show}
|
|
|
|
enter={transitionEnterStyle}
|
|
|
|
enterFrom="opacity-0"
|
|
|
|
enterTo="opacity-100"
|
|
|
|
leave={transitionExitStyle}
|
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Transition>
|
|
|
|
)
|
2022-07-28 16:32:15 -07:00
|
|
|
|
|
|
|
export const FadeInList = ({
|
|
|
|
as = 'div',
|
|
|
|
children,
|
|
|
|
index,
|
|
|
|
}: {
|
|
|
|
as?: any
|
|
|
|
children: ReactNode
|
|
|
|
index: number
|
|
|
|
}) => (
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
as={as}
|
|
|
|
show={true}
|
2022-07-28 19:51:50 -07:00
|
|
|
enter={transitionEnterStyle}
|
2022-08-02 03:44:31 -07:00
|
|
|
enterFrom="opacity-0 border-0"
|
2022-07-28 16:32:15 -07:00
|
|
|
enterTo="opacity-100"
|
2022-07-28 19:51:50 -07:00
|
|
|
leave={transitionExitStyle}
|
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
2022-08-12 17:18:07 -07:00
|
|
|
style={{ transitionDelay: `${index * 25}ms` }}
|
2022-07-28 16:32:15 -07:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Transition>
|
|
|
|
)
|