79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import Card from '@mui/material/Card';
|
|
import CardActions from '@mui/material/CardActions';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import CardMedia from '@mui/material/CardMedia';
|
|
import Button from '@mui/material/Button';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import { styled } from '@mui/material/styles';
|
|
import { Link } from 'react-router-dom';
|
|
interface ComponentProps {
|
|
data: {
|
|
img: string,
|
|
title: string,
|
|
description: string[]
|
|
},
|
|
idx: number;
|
|
}
|
|
|
|
|
|
const StyledTypography = styled(Typography)(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
textAlign: 'justify',
|
|
marginBottom: '2px',
|
|
fontSize: '12px',
|
|
padding: "5px"
|
|
}));
|
|
|
|
|
|
|
|
|
|
function SmallCard({ data,idx }: ComponentProps) {
|
|
// if(reverseModifier){
|
|
// [textA,textB] = [textB,textA];
|
|
// }
|
|
let buf = data.description.reduce((acc, val) => acc + " " + val, "");
|
|
|
|
if (buf.length > 70) {
|
|
buf = buf.slice(0, 70) + "...";
|
|
}
|
|
|
|
const textPart = buf;
|
|
return (
|
|
<Card sx={{ maxWidth: { xs: "100%", md: "300px" }, }}>
|
|
|
|
<Box sx={{
|
|
display: 'flex',
|
|
'flexDirection': {
|
|
xs: 'column',
|
|
md: 'row'
|
|
},
|
|
}}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }} >
|
|
<CardHeader title={data.title} sx={{ p: "5px", '& .MuiCardHeader-title': { fontSize: '13px' } }} />
|
|
<StyledTypography variant="body2" sx={{ display: { xs: "none", md: "block" } }}>
|
|
{textPart}
|
|
</StyledTypography>
|
|
<StyledTypography variant="body2" sx={{ display: { xs: "block", md: "none" } }}>
|
|
{data.description}
|
|
</StyledTypography>
|
|
<CardActions sx={{ justifyContent: 'end', alignContent: "flex-end", p: 0 }} >
|
|
<Link key={idx} to={"/project-details/" + idx}>
|
|
<Button size="small" sx={{ p: "0 5px", fontSize: "10px" }}>Check it out</Button>
|
|
</Link>
|
|
</CardActions>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', maxWidth: { xs: '100%', md: "40%" }, bgcolor: "#0581f513" }} >
|
|
<CardMedia
|
|
component="img"
|
|
alt={data.title}
|
|
image={data.img}
|
|
sx={{ objectFit: 'fill' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default SmallCard; |