36 lines
898 B
TypeScript
36 lines
898 B
TypeScript
|
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} pt={0} pb={0} >
|
||
|
|
<Text color={'#fff'} w="100%" fontSize="sm" display="flex" alignItems="center" h="3%">
|
||
|
|
{title}
|
||
|
|
</Text>
|
||
|
|
<Box
|
||
|
|
w="100%"
|
||
|
|
h="97%"
|
||
|
|
border="1px solid #ffffff30"
|
||
|
|
bg="#434A5330"
|
||
|
|
rounded="md"
|
||
|
|
backdropFilter="blur(10px)"
|
||
|
|
shadow={'xs'}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Box>
|
||
|
|
</MotionVStack>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MainFrame
|