mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-05 03:50:59 +08:00
b79878ab36
- Install ESLint 9 with TypeScript and React support - Install Prettier with custom configuration (no semicolons) - Add husky and lint-staged for pre-commit hooks - Configure lint-staged to auto-fix and format on commit - Relax ESLint rules to avoid large-scale code changes - Format all existing code with Prettier (no semicolons) Co-Authored-By: tinkle-community <tinklefund@gmail.com>
30 lines
673 B
TypeScript
30 lines
673 B
TypeScript
import { useRef } from 'react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
export default function AnimatedSection({
|
|
children,
|
|
id,
|
|
backgroundColor = 'var(--brand-black)',
|
|
}: {
|
|
children: React.ReactNode
|
|
id?: string
|
|
backgroundColor?: string
|
|
}) {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' })
|
|
|
|
return (
|
|
<motion.section
|
|
id={id}
|
|
ref={ref}
|
|
className="py-20 px-4"
|
|
style={{ background: backgroundColor }}
|
|
initial={{ opacity: 0 }}
|
|
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
{children}
|
|
</motion.section>
|
|
)
|
|
}
|