33 行
978 B
TypeScript
33 行
978 B
TypeScript
import { motion } from 'framer-motion'
|
|
|
|
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
|
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
import type { FC, ReactNode } from 'react'
|
|
|
|
type Props = {
|
|
children: ReactNode
|
|
className?: string
|
|
animateLayout?: boolean }
|
|
|
|
|
|
const MainArea: FC<Props> = ({ children, className, animateLayout = true }) => {
|
|
const behaviourSettings = useClientBehaviourSettings ()
|
|
const animationMode = behaviourSettings.animation ?? 'normal'
|
|
const layoutTransition = clientAnimationTransition (
|
|
animationMode,
|
|
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
|
)
|
|
|
|
return (
|
|
<motion.main
|
|
transition={{ layout: layoutTransition }}
|
|
className={cn ('flex-1 overflow-y-auto p-4', className)}
|
|
layout={(animationMode === 'off' || !animateLayout) ? false : 'position'}>
|
|
{children}
|
|
</motion.main>)
|
|
}
|
|
|
|
export default MainArea
|