From 8c5fd96b1d3d3289053123bef701e9eb2e67abde Mon Sep 17 00:00:00 2001
From: Karol Grochowalski <karol.grochowalski@gmail.com>
Date: Wed, 20 Apr 2022 16:01:06 +0200
Subject: [PATCH] update flotiq react components

---
 src/components/RecipeSteps.js | 11 ++++++-----
 src/pages/404.js              |  2 +-
 src/sections/RecipeCards.js   |  2 +-
 src/templates/index.js        | 13 +++++++------
 src/templates/recipe.js       | 17 +++++++++--------
 5 files changed, 24 insertions(+), 21 deletions(-)
diff --git a/src/components/RecipeSteps.js b/src/components/RecipeSteps.js
index 86b442e..79c1b33 100644
--- a/src/components/RecipeSteps.js
+++ b/src/components/RecipeSteps.js
@@ -8,11 +8,12 @@ const RecipeSteps = ({ additionalClass, steps }) => (
     >
         {steps.map((step, index) => (
             <div key={step.step} className="w-full px-4 md:px-10">
-                <Paragraph
-                    text={`Step ${index + 1}`}
-                    additionalClasses={['font-semibold underline mr-2 !p-0']}
-                />
-                <Paragraph text={step.step} additionalClasses={['!p-0 mb-5']} />
+                <Paragraph additionalClasses={['font-semibold underline mr-2 !p-0']}>
+                    {`Step ${index + 1}`}
+                </Paragraph>
+                <Paragraph additionalClasses={['!p-0 mb-5']}>
+                    {step.step}
+                </Paragraph>
                 {step.image && step.image[0]
                   && (
                       <GatsbyImage
diff --git a/src/pages/404.js b/src/pages/404.js
index f285945..0530cc1 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -9,7 +9,7 @@ const NotFoundPage = () => (
         <Helmet>
             <title>Page not found</title>
         </Helmet>
-        <Header text="Page not found, sorry" />
+        <Header>Page not found, sorry</Header>
         <div className="text-center mt-5 pt-5">
             {/* Example usage of button */}
             <Link to="/"><Button label="Go back to index" /></Link>
diff --git a/src/sections/RecipeCards.js b/src/sections/RecipeCards.js
index 3b45629..d8d89ce 100644
--- a/src/sections/RecipeCards.js
+++ b/src/sections/RecipeCards.js
@@ -8,7 +8,7 @@ const RecipeCards = ({ recipes, headerText, compact = false }) => (
             ? 'max-w-7xl mt-6 mb-6 mx-auto px-4 py-4 sm:px-6 lg:px-8'
             : 'max-w-7xl mt-6 mb-6 mx-auto px-4 py-4 sm:px-6 lg:px-8 xl:px-0'}
     >
-        {headerText && <Header additionalClasses={['basis-1 mb-2 !text-3xl !font-medium']} text={headerText} />}
+        {headerText && <Header additionalClasses={['basis-1 mb-2 !text-3xl !font-medium']}>{headerText}</Header>}
         <div className={compact ? 'grid md:grid-cols-2 lg:grid-cols-3 gap-6' : 'flex flex-col'}>
             {recipes.map((recipe) => (
                 <RecipeCard
diff --git a/src/templates/index.js b/src/templates/index.js
index cc79e56..d3afbb6 100644
--- a/src/templates/index.js
+++ b/src/templates/index.js
@@ -14,12 +14,13 @@ const announcementText = 'This is the Blog where you can find any kind of inform
 const IndexPage = ({ data, pageContext }) => {
     // Extracting data from GraphQL query, the query is on the bottom of this file
     const recipes = data.allRecipe.nodes;
-    const categoryTabs = [
-        { name: 'Breakfast', href: '#', current: true },
-        { name: 'Dinner', href: '#', current: false },
-        { name: 'Dessert', href: '#', current: false },
-        { name: 'Lunch', href: '#', current: false },
-    ];
+    // Uncomment this to add categories to your recipes
+    // const categoryTabs = [
+    //     { name: 'Breakfast', href: '#', current: true },
+    //     { name: 'Dinner', href: '#', current: false },
+    //     { name: 'Dessert', href: '#', current: false },
+    //     { name: 'Lunch', href: '#', current: false },
+    // ];
     return (
         <Layout additionalClass={['font-karla']}>
             {/* Content of <head> tag */}
diff --git a/src/templates/recipe.js b/src/templates/recipe.js
index 0a9ac1f..f368972 100644
--- a/src/templates/recipe.js
+++ b/src/templates/recipe.js
@@ -35,8 +35,9 @@ const RecipeTemplate = ({ data }) => {
                         <Header
                             additionalClasses={['text-xl md:text-4xl text-white !font-semibold '
                                 + 'uppercase tracking-wider !p-0']}
-                            text={recipe.name}
-                        />
+                        >
+                            {recipe.name}
+                        </Header>
                         <div className="flex flex-wrap justify-start text-xs text-primary font-light
                             space-x-5 pb-3 mt-5"
                         >
@@ -51,15 +52,15 @@ const RecipeTemplate = ({ data }) => {
                                 <span className="text-sm">{recipe.servings}</span>
                             </p>
                         </div>
-                        <Paragraph text={recipe.description} additionalClasses={['mt-5']} />
+                        <Paragraph additionalClasses={['mt-5']}>
+                            {recipe.description}
+                        </Paragraph>
                         <div className="absolute bottom-0 right-0 h-6 md:h-12 w-6 md:w-12 bg-white" />
                     </div>
                     <div className="bg-white px-4 md:px-10 py-5">
-                        <Header
-                            level={2}
-                            additionalClasses={['mt-5 pl-7 !text-2xl']}
-                            text={ingredientsHeaderText}
-                        />
+                        <Header level={2} additionalClasses={['mt-5 pl-7 !text-2xl']}>
+                            {ingredientsHeaderText}
+                        </Header>
                         <fieldset className="space-y-5">
                             <div>
                                 {recipe.ingredients.map((ingredient) => (
