add recipe card

Author: solygambas

marmite/components/RecipeCard.js

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+function RecipeCard({ recipe }) {
+  const { title, slug, cookingTime, thumbnail } = recipe.fields;
+  return (
+    <div className="card">
+      <div className="featured"></div>
+      <div className="content">
+        <div className="info">
+          <h4>{title}</h4>
+          <p>Takes approx {cookingTime} mins to make</p>
+        </div>
+        <div className="actions">
+          <Link href={`/recipes/${slug}`}>
+            <a>Cook this</a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RecipeCard;

marmite/pages/index.js

@@ -1,5 +1,7 @@
 import { createClient } from "contentful";
 
+import RecipeCard from "../components/RecipeCard";
+
 export async function getStaticProps() {
   const client = createClient({
     space: process.env.CONTENTFUL_SPACE_ID,
@@ -14,6 +16,11 @@ export async function getStaticProps() {
 }
 
 export default function Recipes({ recipes }) {
-  console.log(recipes);
-  return <div className="recipe-list">Recipe List</div>;
+  return (
+    <div className="recipe-list">
+      {recipes.map((recipe) => (
+        <RecipeCard key={recipe.sys.id} recipe={recipe} />
+      ))}
+    </div>
+  );
 }