diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2024-06-21 11:01:35 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2024-06-21 11:01:35 +0700 |
| commit | 220190db66bcc1c6db78180c593f21e9cf8f363c (patch) | |
| tree | 1517faa9636a6b3b2cc8d468a57b1fe476c229d7 /src-migrate/components | |
| parent | 208b234320b6c42491a4e87a1c3db3abab9c1715 (diff) | |
| parent | 1cf754b4d8da1aa28700ffc3dad67081f6daf9a5 (diff) | |
Merge branch 'promotion-program' into feature/all-promotion
Diffstat (limited to 'src-migrate/components')
| -rw-r--r-- | src-migrate/components/ui/smooth-render.tsx | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx new file mode 100644 index 00000000..5de3b28d --- /dev/null +++ b/src-migrate/components/ui/smooth-render.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import clsxm from '~/libs/clsxm' + +type Props = { + children: React.ReactNode, + isLoaded: boolean, + height: string, + duration?: string + delay?: string +} & React.HTMLProps<HTMLDivElement> + +const SmoothRender = (props: Props) => { + const { + children, + isLoaded, + height, + duration = 0, + delay = 0, + style, + className, + ...rest + } = props + + return ( + <div + className={clsxm('overflow-y-hidden transition-all', className)} + style={{ + opacity: isLoaded ? 1 : 0, + height: isLoaded ? height : 0, + transitionDuration: duration || '', + transitionDelay: delay || '', + ...style + }} + {...rest} + > + {isLoaded && children} + </div> + ) +} + +export default SmoothRender
\ No newline at end of file |
