Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import {
  Avatar,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  CardMedia,
  styled
} from '@mui/material';

import colors from '@styles/config/colors';

const WidgetContainer = styled(Card)(({ theme }) => ({
  borderRadius: 0,
  border: `1px solid ${colors.border.primary}`,
  height: 'fit-content',
  position: 'relative',
  boxShadow: 'none',
  transition: theme.transitions.easing.easeInOut,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    borderRadius: theme.shape.borderRadius
  }
}));

export function Widget({ children, styles, ...props }) {
  return (
    <WidgetContainer sx={styles} {...props}>
      {children}
    </WidgetContainer>
  );
}

export function WidgetHeader({
  title = '',
  subheader = '',
  avatar = '',
  styles = {},
  renderAction = () => null,
  onClick = () => {},
  ...props
}) {
  return (
    <CardHeader
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
      action={typeof renderAction === 'function' ? renderAction() : null}
      title={title}
      subheader={subheader}
      titleTypographyProps={{
        variant: 'h3',
        onClick
      }}
      subheaderTypographyProps={{
        variant: 'overline'
      }}
      sx={{
        '& .MuiCardHeader-action ': { marginRight: 0 },
        padding: 1,
        ...styles
      }}
      {...props}
    />
  );
}

export function WidgetBody({ children, styles = {}, ...props }) {
  return (
    <CardContent
      sx={{
        padding: 1,
        '&:last-child': { paddingBottom: 1 },
        '.MuiCardHeader-root + &': { paddingTop: 0 },
        ...styles
      }}
      {...props}
    >
      {children}
    </CardContent>
  );
}

export function WidgetFooter({ children, styles = {}, ...props }) {
  return (
    <CardActions
      sx={{
        padding: 0.5,
        justifyContent: 'space-around',
        gap: { xs: 0, md: 0.5 },
        borderTop: `1px solid ${colors.border.primary}`,
        ...styles
      }}
      {...props}
    >
      {children}
    </CardActions>
  );
}

export function WidgetActions({ children, styles = {}, ...props }) {
  return (
    <CardActions
      sx={{
        padding: 0.5,
        justifyContent: 'space-around',
        gap: { xs: 0, md: 0.5 },
        '& > button': {
          flex: 1,
          flexWrap: 'wrap'
        },
        borderTop: `1px solid ${colors.border.primary}`,
        ...styles
      }}
      disableSpacing
      {...props}
    >
      {children}
    </CardActions>
  );
}

const getMediaComponent = (type) => {
  const options = {
    image: 'img',
    video: 'video',
    audio: 'audio'
  };

  return options[type] ?? options.image;
};

export function WidgetMedia({
  src = '',
  height,
  width,
  alt = '',
  type = 'image',
  styles = {},
  ...props
}) {
  return (
    <CardMedia
      alt={alt}
      component={getMediaComponent(type)}
      height={height}
      image={src}
      width={width}
      sx={{
        objectFit: 'contain',
        ...styles
      }}
      {...props}
    />
  );
}

Widget.Header = WidgetHeader;
Widget.Body = WidgetBody;
Widget.Footer = WidgetFooter;
Widget.Actions = WidgetActions;
Widget.Media = WidgetMedia;

export default Widget;