finish setting up grid for recipebook

mykovasyl · Mar 19, 2023 · cccc77f · cccc77f
1 parent 599677b
commit cccc77f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/client/src/components/Recipe.js b/client/src/components/Recipe.js
@@ -13,7 +13,6 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 // import { red } from "@mui/material/colors";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Grid } from "@mui/material";
 
 function Recipe({ recipe }) {
   const { currentUser, handleDeleteRecipe, handleAddRecipe } =

diff --git a/client/src/components/RecipeBook.js b/client/src/components/RecipeBook.js
@@ -1,23 +1,33 @@
-// filter between liked and self created recipes
-import { Grid } from "@mui/material";
 import React, { useContext } from "react";
+import { styled } from "@mui/material/styles";
+import { Grid } from "@mui/material";
+import Paper from "@mui/material/Paper";
 import { UserContext } from "./App";
 import Recipe from "./Recipe";
 
 function RecipeBook() {
   const { currentUser } = useContext(UserContext);
+  const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: "center",
+    color: theme.palette.text.secondary,
+  }));
   const recipesDisplayed = currentUser.recipes.map((recipe) => (
-    <Grid container spacing={2}>
-      <Recipe key={recipe.summary} recipe={recipe} />
+    <Grid item md={4}>
+      <Item>
+        <Recipe key={recipe.summary} recipe={recipe} />
+      </Item>
     </Grid>
   ));
 
   return (
-    <div>
+    <Grid container spacing={2}>
       {recipesDisplayed.length === 0
         ? "Your booka recipe book is currently empty. Go to Random Recipe or Add Recipe to add recipes!"
         : recipesDisplayed}
-    </div>
+    </Grid>
   );
 }