hw7 started, added project info page

site/src/main/components/SmallCard.tsx

@@ -0,0 +1,79 @@
+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;