upload

frontend/src/components/widgets/Widget.tsx

@@ -0,0 +1,30 @@
+import { Box, BoxProps, Heading, Icon, useColorModeValue } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+interface WidgetProps extends BoxProps {
+  title: string;
+  icon?: any;
+  children: ReactNode;
+}
+
+export const Widget = ({ title, icon, children, ...rest }: WidgetProps) => {
+  return (
+    <Box
+      bg={useColorModeValue('white', 'gray.800')}
+      p={4}
+      borderRadius="lg"
+      boxShadow="sm"
+      borderWidth="1px"
+      borderColor={useColorModeValue('gray.200', 'gray.700')}
+      _hover={{ boxShadow: 'md' }}
+      transition="all 0.2s"
+      {...rest}
+    >
+      <Heading size="md" mb={4} display="flex" alignItems="center">
+        {icon && <Icon as={icon} mr={2} />}
+        {title}
+      </Heading>
+      {children}
+    </Box>
+  );
+};