hw6 done

site/src/App.tsx

@@ -2,7 +2,7 @@ import NavBar from './components/Navbar'
 import Gallery from "./components/Gallery";
 import MainContent from "./components/Content";
 import CustomFooter from "./components/CustomFooter";
-
+import Sidebar from "./components/Sidebar";
 
 import {Container} from "@mui/material";
 
@@ -13,7 +13,11 @@ function App() {
     <>
       <NavBar  active='1'/>
       <Gallery />
-      <MainContent />
+      <Container sx={{display: 'flex', flexDirection: {xs: 'column', md: 'row'}, gap: '2px', mt: '20px',p:"0px !important"}}>
+        <MainContent />
+        <Sidebar />
+      </Container>
+  
       <CustomFooter/>
     </>
   )

site/src/components/BigCard.tsx

@@ -35,8 +35,8 @@ function BigCard({ data, cardNum }: ComponentProps) {
   //   [textA,textB] = [textB,textA];
   // }
   return (
-    <Card>
-      <CardHeader title={data.title} />
+    <Card sx={{mb:"10px"}}>
+      <CardHeader title={data.title}  sx={{bgcolor:"#00000015", p:"5px"}}/>
       <Box sx={{
         display: 'flex',
         'flexDirection': {

site/src/components/Content.tsx

@@ -6,7 +6,7 @@ const cardData = mainCards
 
 function Content() {
   return (
-    <Container maxWidth="xl">
+    <Container maxWidth="xl" sx={{pr:{md:"0px !important",xs:"20px"}}}>
       {cardData.map((item, index) => (
         <Grid key={index} size={{ xs: 12, md: 6 }} >
           <BigCard data={ item } cardNum={index} />

site/src/components/Sidebar.tsx

@@ -0,0 +1,19 @@
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import {sidecardData} from "../data";
+import SmallCard from "./SmallCard"
+const cardData = sidecardData
+
+function Content() {
+  return (
+    <Container maxWidth="xs" sx={{maxWidth: {xs:"100%", md:"300px"}, pr:{md:"0px !important",xs:"20px"}}}>
+      {cardData.map((item, index) => (
+        <Grid key={index} size={{ xs: 12, md: 3 }} >
+          <SmallCard data={ item } cardNum={index} />
+        </Grid>
+      ))}
+    </Container>
+  );
+}
+
+export default Content;

site/src/components/SmallCard.tsx

@@ -0,0 +1,77 @@
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+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';
+interface ComponentProps {
+  data: {
+    img: string,
+    title: string,
+    description: string[]
+  },
+  cardNum: number;
+}
+
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textAlign: 'justify',
+  marginBottom: '2px',
+  fontSize: '12px',
+  padding:"5px"
+}));
+
+
+
+
+function SmallCard({ data, cardNum }: 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 }} >
+            <Button size="small" sx={{p:0, fontSize:"10px"}}>Check it out</Button>
+          </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;