SSA-Admin-Panel/src/components/MainFrame.tsx

import { Box, VStack } from "@chakra-ui/react"
import { motion } from "framer-motion"
import React, { FC } from "react"
import { OPACITY_ON_LOAD } from "../Layouts/animations"

// ✅ Wrap Chakra components with Framer Motion
const MotionVStack = motion(VStack)

interface MainFrameProps {
  children: React.ReactNode
  title?: string
}

const MainFrame: FC<MainFrameProps> = ({ children }) => {
  return (
    <MotionVStack {...OPACITY_ON_LOAD} w="100%" h="90%" p={0}  pb={0}>
      <Box
        w="100%"
        h="100%"
        bg="#ffffff"
        overflow={'scroll'}
        // rounded="md"
        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
        pt={3}
      >
        {children}
      </Box>
    </MotionVStack>
  )
}

export default MainFrame