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

import { Box, Text, 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, title }) => {
  return (
    <MotionVStack {...OPACITY_ON_LOAD} w="100%" h="94%" p={4}  pb={0}  >
      <Box
        w="100%"
        h="97%"
        bg="#ffffff"
        rounded="md"
        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
      >
        {children}
      </Box>
    </MotionVStack>
  )
}

export default MainFrame