leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor ClassCard

Browse source
This commit is contained in:
Leonardo Murça 2022-07-05 11:17:30 -03:00
parent 205d3f0117
commit ef3dc2a71a
3 changed files with 223 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
src/components/ClassCard.js
View file

@ -1,144 +0,0 @@
import {
Card,
CardContent,
Typography,
CardActionArea,
Container,
Avatar,
Stack,
AvatarGroup,
Tooltip,
} from '@mui/material';
function ClassCard({
abbreviation,
title,
color,
teachers,
layoutType,
onClick,
}) {
if (layoutType === 'desktop') {
return (
<Card sx={{ width: 390, height: 135 }}>
<CardActionArea
onClick={() => onClick()}
sx={{ display: 'flex', flexDirection: 'row' }}
>
<Container
sx={{
backgroundColor: color,
width: '35%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '70%' }}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
}}
gutterBottom
variant="h6"
component="div"
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body3"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
} else if (layoutType === 'mobile') {
return (
<Card sx={{ width: '100%' }}>
<CardActionArea
onClick={() => onClick()}
sx={{ display: 'flex', flexDirection: 'column' }}
>
<Container
sx={{
backgroundColor: color,
width: '100%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '100%' }}>
<Typography gutterBottom variant="h6" component="div">
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
}
}
export default ClassCard;

107
src/components/ClassCard/index.js Normal file
View file

@ -0,0 +1,107 @@
import {
Card,
CardContent,
Typography,
CardActionArea,
Container,
Avatar,
Stack,
AvatarGroup,
Tooltip,
} from '@mui/material';
import styles from './styles';
function ClassCard({
abbreviation,
title,
color,
teachers,
layoutType,
onClick,
}) {
const {
cardContainer,
cardActionArea,
abbreviationContainer,
cardContent,
titleContainer,
avatar,
tooltip,
} = styles[layoutType];
if (layoutType === 'desktop') {
return (
<Card sx={cardContainer}>
<CardActionArea onClick={() => onClick()} sx={cardActionArea}>
<Container sx={abbreviationContainer(color)}>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={cardContent}>
<Typography
sx={titleContainer}
gutterBottom
variant="h6"
component="div"
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography sx={tooltip} variant="body3" color="text.secondary">
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
} else if (layoutType === 'mobile') {
return (
<Card sx={cardContainer}>
<CardActionArea onClick={() => onClick()} sx={cardActionArea}>
<Container sx={abbreviationContainer(color)}>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={cardContent}>
<Typography
sx={titleContainer}
gutterBottom
variant="h6"
component="div"
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={avatar}
/>
))}
</AvatarGroup>
<Typography sx={tooltip} variant="body2" color="text.secondary">
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
}
}
export default ClassCard;

116
src/components/ClassCard/styles.js Normal file
View file

@ -0,0 +1,116 @@
// ========== Desktop ==========
const desktopCardContainer = {
width: 390,
height: 135,
};
const desktopCardActionArea = {
display: 'flex',
flexDirection: 'row',
};
const desktopAbbreviationContainer = color => ({
backgroundColor: color,
width: '35%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
});
const desktopCardContent = {
width: '70%',
};
const desktopTitleContainer = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
};
const desktopAvatar = {
width: 30,
height: 30,
};
const desktopTooltip = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
};
const desktop = {
cardContainer: desktopCardContainer,
cardActionArea: desktopCardActionArea,
abbreviationContainer: desktopAbbreviationContainer,
cardContent: desktopCardContent,
titleContainer: desktopTitleContainer,
avatar: desktopAvatar,
tooltip: desktopTooltip,
};
// ========== Mobile ==========
const mobileCardContainer = {
width: '100%',
};
const mobileCardActionArea = {
display: 'flex',
flexDirection: 'column',
};
const mobileAbbreviationContainer = color => ({
backgroundColor: color,
width: '100%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
});
const mobileCardContent = {
width: '100%',
};
const mobileAvatar = {
width: 30,
height: 30,
};
const mobileTooltip = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
};
const mobile = {
cardContainer: mobileCardContainer,
cardActionArea: mobileCardActionArea,
abbreviationContainer: mobileAbbreviationContainer,
cardContent: mobileCardContent,
titleContainer: null,
avatar: mobileAvatar,
tooltip: mobileTooltip,
};
// ========== Unset ==========
const unset = {
cardContainer: null,
cardActionArea: null,
abbreviationContainer: null,
cardContent: null,
titleContainer: null,
avatar: null,
tooltip: null,
};
const styles = { desktop, mobile, unset };
export default styles;