29 lines
705 B
TypeScript
29 lines
705 B
TypeScript
'use client'
|
|
|
|
import { motion, Transition } from 'framer-motion'
|
|
import React from 'react'
|
|
import { useMediaQuery } from '@/hooks/useMediaQuery'
|
|
|
|
type FadeInProps = {
|
|
children: React.ReactNode
|
|
transition?: Transition
|
|
className?: string
|
|
}
|
|
|
|
export function FadeIn({ children, transition, className }: FadeInProps) {
|
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
|
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
|
|
transition={transition || { duration: 0.5 }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
)
|
|
}
|
|
|