add recipe cards and details

Author: solygambas

marmite/components/RecipeCard.js

@@ -1,10 +1,17 @@
 import Link from "next/link";
+import Image from "next/image";
 
 function RecipeCard({ recipe }) {
   const { title, slug, cookingTime, thumbnail } = recipe.fields;
   return (
     <div className="card">
-      <div className="featured"></div>
+      <div className="featured">
+        <Image
+          src={`https:${thumbnail.fields.file.url}`}
+          width={thumbnail.fields.file.details.image.width}
+          height={thumbnail.fields.file.details.image.height}
+        />
+      </div>
       <div className="content">
         <div className="info">
           <h4>{title}</h4>
@@ -16,6 +23,41 @@ function RecipeCard({ recipe }) {
           </Link>
         </div>
       </div>
+      <style jsx>{`
+        .card {
+          transform: rotateZ(-1deg);
+        }
+        .content {
+          background: #fff;
+          box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+          margin: 0;
+          position: relative;
+          top: -40px;
+          left: -10px;
+        }
+        .info {
+          padding: 16px;
+        }
+        .info h4 {
+          margin: 4px 0;
+          text-transform: uppercase;
+        }
+        .info p {
+          margin: 0;
+          color: #777;
+        }
+        .actions {
+          margin-top: 20px;
+          display: flex;
+          justify-content: flex-end;
+        }
+        .actions a {
+          color: #fff;
+          background: #f01b29;
+          padding: 16px 24px;
+          text-decoration: none;
+        }
+      `}</style>
     </div>
   );
 }

marmite/pages/index.js

@@ -21,6 +21,13 @@ export default function Recipes({ recipes }) {
       {recipes.map((recipe) => (
         <RecipeCard key={recipe.sys.id} recipe={recipe} />
       ))}
+      <style jsx>{`
+        .recipe-list {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 20px 60px;
+        }
+      `}</style>
     </div>
   );
 }

marmite/pages/recipes/[slug].js

@@ -1,7 +1,89 @@
-export default function RecipeDetails() {
+import { createClient } from "contentful";
+import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
+import Image from "next/image";
+
+const client = createClient({
+  space: process.env.CONTENTFUL_SPACE_ID,
+  accessToken: process.env.CONTENTFUL_DELIVERY_API,
+});
+
+export const getStaticPaths = async () => {
+  const res = await client.getEntries({ content_type: "recipe" });
+  const paths = res.items.map((item) => {
+    return {
+      params: { slug: item.fields.slug },
+    };
+  });
+  return { paths, fallback: false };
+};
+
+export async function getStaticProps({ params }) {
+  const { items } = await client.getEntries({
+    content_type: "recipe",
+    "fields.slug": params.slug,
+  });
+  return {
+    props: {
+      recipe: items[0],
+    },
+  };
+}
+
+export default function RecipeDetails({ recipe }) {
+  const {
+    featuredImage,
+    title,
+    cookingTime,
+    ingredients,
+    method,
+  } = recipe.fields;
   return (
     <div>
-      Recipe Details
+      <div className="banner">
+        <Image
+          src={`https:${featuredImage.fields.file.url}`}
+          width={featuredImage.fields.file.details.image.width}
+          height={featuredImage.fields.file.details.image.height}
+        />
+        <h2>{title}</h2>
+      </div>
+      <div className="info">
+        <p>Takes approx {cookingTime} mins to make</p>
+        <h3>Ingredients:</h3>
+        {ingredients.map((ingredient) => (
+          <span key={ingredient}>{ingredient}</span>
+        ))}
+      </div>
+      <div className="method">
+        <h3>Method:</h3>
+        <div>{documentToReactComponents(method)}</div>
+      </div>
+      <style jsx>{`
+        h2,
+        h3 {
+          text-transform: uppercase;
+        }
+        .banner h2 {
+          margin: 0;
+          background: #fff;
+          display: inline-block;
+          padding: 20px;
+          position: relative;
+          top: -60px;
+          left: -10px;
+          transform: rotateZ(-1deg);
+          box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+        }
+        .info p {
+          margin: 0;
+        }
+        .info span::after {
+          content: ", ";
+        }
+        .info span:last-child::after {
+          content: ".";
+        }
+      `}</style>
     </div>
-  )
-}
+  );
+}