travail cassé

package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/IngredientList.js

@@ -5,5 +5,5 @@ export default function IngredientList({ ingredients }) {
 	const ingredientElements = ingredients.map((ingredient) => {
 		return <Ingredient key={ingredient.id} {...ingredient} />;
 	});
-	return <div>{ingredientElements}</div>;
+	return <div className='ingredient-grid'>{ingredientElements}</div>;
 }

src/components/Recipe.js

@@ -9,29 +9,31 @@ export default function Recipe({
 	ingredients,
 }) {
 	return (
-		<div>
-			<div>
-				<h3>{name}</h3>
+		<div className='recipe'>
+			<div className='recipe__header'>
+				<h3 className='recipe__title'>{name}</h3>
 				<div>
-					<button>Edit</button>
-					<button>Delete</button>
+					<button className='btn btn--primary mr-1'>Edit</button>
+					<button className='btn btn--danger'>Delete</button>
 				</div>
 			</div>
-			<div>
-				<span>Cook Time:</span>
-				<div>{cookTime}</div>
+			<div className='recipe__row'>
+				<span className='recipe__label'>Cook Time:</span>
+				<div className='recipe__value'>{cookTime}</div>
 			</div>
-			<div>
-				<span>Servings:</span>
-				<div>{servings}</div>
+			<div className='recipe__row'>
+				<span className='recipe__label'>Servings:</span>
+				<div className='recipe__value'>{servings}</div>
 			</div>
 			<div>
-				<span>Instructions</span>
-				<div>{instructions}</div>
+				<span className='recipe__label'>Instructions</span>
+				<div className='recipe__value recipe__instructions recipe__value--indented'>
+					{instructions}
+				</div>
 			</div>
-			<div>
-				<span>Ingredients</span>
-				<div>
+			<div className='recipe__row'>
+				<span className='recipe__label'>Ingredients</span>
+				<div className='recipe__value recipe__value--indented'>
 					<IngredientList ingredients={ingredients} />
 				</div>
 			</div>

src/components/RecipeList.js

@@ -3,13 +3,15 @@ import Recipe from './Recipe';
 
 export default function RecipeList({ recipes }) {
 	return (
-		<>
+		<div className='recipe-list'>
 			<div>
 				{recipes.map((recipe) => {
 					return <Recipe key={recipe.id} {...recipe} />;
 				})}
 			</div>
-			<button>Add Recipe</button>
-		</>
+			<div className='recipe-list__add-recipe-btn-container'>
+				<button className='btn btn--primary'>Add Recipe</button>
+			</div>
+		</div>
 	);
 }

src/css/app.css

@@ -1,7 +1,25 @@
 @import-normalize;
 @import 'font.css';
+@import 'buttons.css';
+@import 'recipe-list.css';
+@import 'ingredient-list.css';
+@import 'recipe.css';
+
 *,
 *::before,
 *::after {
-	font-family: Gotham Rounded, sans-serif;
+	font-family: Cafe;
+}
+
+html {
+	font-size: 1.5rem;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+.mr-1 {
+	margin-right: 5px;
 }

src/css/buttons.css

@@ -0,0 +1,28 @@
+.btn {
+	background: none;
+	border: none;
+	outline: none;
+	font-weight: bold;
+	font-size: inherit;
+	border-radius: 5px;
+	padding: 5px 20px;
+	cursor: pointer;
+}
+
+.btn--primary {
+	color: white;
+	background-color: hsl(200, 100%, 50%);
+}
+
+.btn--primary:hover {
+	background-color: hsl(200, 100%, 35%);
+}
+
+.btn--danger {
+	color: white;
+	background-color: hsl(0, 100%, 50%);
+}
+
+.btn--danger:hover {
+	background-color: hsl(0, 100%, 35%);
+}

src/css/font.css

@@ -0,0 +1,4 @@
+@font-face {
+	font-family: Cafe;
+	src: url(../fonts/Louis\ George\ Cafe.ttf);
+}

src/css/ingredient-list.css

@@ -0,0 +1,7 @@
+.ingredient-grid {
+	display: grid;
+	grid-template-columns: repeat(2, auto);
+	row-gap: 5px;
+	column-gap: 40px;
+	justify-content: flex-start;
+}

src/css/recipe-list.css

@@ -0,0 +1,11 @@
+.recipe-list {
+	border-right: 1px solid black;
+	min-height: 100vh;
+	width: 50%;
+}
+
+.recipe-list__add-recipe-btn-container {
+	padding-top: 30px;
+	padding-bottom: 30px;
+	text-align: center;
+}

src/css/recipe.css

@@ -0,0 +1,45 @@
+.recipe {
+	padding: 20px;
+	padding-bottom: 40px;
+	border-bottom: 1px solid black;
+}
+
+.recipe:last-child {
+	border-bottom: none;
+	padding-bottom: 10px;
+}
+
+.recipe__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 30px;
+}
+
+.recipe__title {
+	margin: 0;
+	font-size: 2rem;
+	font-weight: bolder;
+}
+
+.recipe__row {
+	margin-top: 10px;
+}
+
+.recipe__label {
+	margin-right: 5px;
+	font-weight: bold;
+}
+
+.recipe__value {
+	font-weight: lighter;
+}
+
+.recipe__value--indented {
+	margin-top: 10px;
+	margin-left: 20px;
+}
+
+.recipe__instructions {
+	white-space: pre-wrap;
+}