MyClub/frontend/src/components/widgets/Widget.tsx

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>
  );
};