Refactor ClassCard
This commit is contained in:
parent
205d3f0117
commit
ef3dc2a71a
3 changed files with 223 additions and 144 deletions
|
|
@ -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
107
src/components/ClassCard/index.js
Normal 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
116
src/components/ClassCard/styles.js
Normal 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;
|
||||||
Loading…
Reference in a new issue