2022-03-26 03:05:05 -04:00
|
|
|
// https://www.joshwcomeau.com/snippets/react-components/fade-in/
|
2022-04-09 20:48:19 -04:00
|
|
|
import styles from "./fade.module.css"
|
2022-03-26 03:05:05 -04:00
|
|
|
|
|
|
|
const FadeIn = ({
|
2022-04-09 20:48:19 -04:00
|
|
|
duration = 300,
|
|
|
|
delay = 0,
|
|
|
|
children,
|
|
|
|
...delegated
|
2022-03-26 03:05:05 -04:00
|
|
|
}: {
|
2022-04-09 20:48:19 -04:00
|
|
|
duration?: number
|
|
|
|
delay?: number
|
|
|
|
children: React.ReactNode
|
|
|
|
[key: string]: any
|
2022-03-26 03:05:05 -04:00
|
|
|
}) => {
|
2022-04-09 20:48:19 -04:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
{...delegated}
|
|
|
|
className={styles.fadeIn}
|
|
|
|
style={{
|
|
|
|
...(delegated.style || {}),
|
|
|
|
animationDuration: duration + "ms",
|
|
|
|
animationDelay: delay + "ms"
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2022-03-26 03:05:05 -04:00
|
|
|
|
|
|
|
export default FadeIn
|