Merge pull request #2 from oslabs-beta/victor/marketplaceCards

add marketplace card UI

Author: AhnafKhvn

app/src/components/marketplace/MarketplaceCard.tsx

@@ -0,0 +1,94 @@
+import {
+  Avatar,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Collapse,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  styled
+} from '@mui/material';
+
+import { MoreVert } from '@mui/icons-material';
+import React from 'react';
+import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
+import { red } from '@mui/material/colors';
+
+const ITEM_HEIGHT = 48;
+const MarketplaceCard = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <>
+      <Card
+        sx={{ maxWidth: 384, backgroundColor: '#1E1E1E', borderRadius: '12px' }}
+      >
+        <CardMedia
+          sx={{ borderRadius: '12px', height: 200 }}
+          component="img"
+          height="194"
+          image={imageSrc}
+          alt="component buttons"
+        />
+        <CardHeader
+          avatar={
+            <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
+              R
+            </Avatar>
+          }
+          action={
+            <IconButton
+              aria-label="more"
+              id="long-button"
+              aria-controls={open ? 'long-menu' : undefined}
+              aria-expanded={open ? 'true' : undefined}
+              aria-haspopup="true"
+              onClick={handleClick}
+            >
+              <MoreVert />
+            </IconButton>
+          }
+          title="Gradient Buttons"
+          subheader="Liam Rohn"
+        />
+        <Menu
+          id="long-menu"
+          MenuListProps={{
+            'aria-labelledby': 'long-button'
+          }}
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          PaperProps={{
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: '20ch',
+              backgroundColor: '#1E1E1E'
+            }
+          }}
+        >
+          <MenuItem
+            onClick={handleClose}
+            sx={{
+              color: '#C6C6C6'
+            }}
+          >
+            Clone
+          </MenuItem>
+        </Menu>
+      </Card>
+    </>
+  );
+};
+
+export default MarketplaceCard;

app/src/components/marketplace/MarketplaceCardContainer.tsx

@@ -0,0 +1,28 @@
+import { Container, Grid } from '@mui/material';
+
+import MarketplaceCard from './MarketplaceCard';
+import React from 'react';
+
+const MarketplaceCardContainer = () => {
+  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+  return (
+    <>
+      <Container>
+        <Grid
+          container
+          maxWidth={'1260px'}
+          spacing={{ xs: 2, md: 3 }}
+          columns={{ xs: 4, sm: 8, md: 12 }}
+        >
+          {numbers.map((num) => (
+            <Grid item xs={4} sm={4} md={4} key={num}>
+              <MarketplaceCard />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </>
+  );
+};
+
+export default MarketplaceCardContainer;