Create basic Navbar component

recipes/src/components/Navbar/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './styles.scss';
+
+type NavbarProps = {
+  title: string,
+  actions?: {
+    label: string,
+    onClick: () => void,
+  }[]
+}
+export default function Navbar(props: NavbarProps){
+  return (
+    <div className='cbk-navbar'>
+      <div>
+        <h4>{props.title}</h4>
+      </div>
+      {
+        props.actions ? (
+          <div>
+            {
+              props.actions.map((action, i) => (
+                <button key={i} onClick={action.onClick}>{action.label}</button>
+              ))
+            }
+          </div>
+        ) : null
+      }
+    </div>
+  );
+};

recipes/src/components/Navbar/styles.scss

@@ -0,0 +1,11 @@
+@import 'styles/_variables.scss';
+
+.cbk-navbar {
+  background-color: white;
+  min-height: 128px;
+  margin-top: $spacing-regular;
+  padding: $spacing-regular;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}

recipes/src/components/RecipeCard/index.tsx

@@ -29,7 +29,7 @@ function CBKRecipeCard(props: RecipeCardProps) {
       <div className='cbk-recipe-card__primary'>
         <CardMedia square imageUrl={sample_img} className='cbk-recipe-card__primary__image'/>
         <div className='cbk-recipe-card__primary__title'>
-          <h6>{recipe.name}</h6>
+          <h4>{recipe.name}</h4>
           <p>{recipe.summary}</p>
           <ul>
             <li>
@@ -54,8 +54,8 @@ function CBKRecipeCard(props: RecipeCardProps) {
         <div className='cbk-recipe-card__content__instructions'>
           <ol>
             {
-              recipe.instructions.map((step, i) => (
-                <li key={i}>{step}</li>
+              recipe.instructions.map((instruction, i) => (
+                <li key={i}>{instruction}</li>
               ))
             }            
           </ol>

recipes/src/components/RecipeCard/styles.scss

@@ -22,22 +22,6 @@
       padding-top: $spacing-regular;
       padding-bottom: $spacing-regular;
 
-      h6 {
-        margin: 0;
-        font-size: $font-size-xx-large;
-      }
-
-      h6:after {
-        content: "";
-        display: block;
-        margin: 0 auto;
-        width: 50px;
-        margin-top: -20px;
-        border-bottom: 16px solid;
-        border-bottom-color: $grey-300;
-        margin-left: -4px;
-      }
-
       p {
         color: $grey-500;
         letter-spacing: 1px;

recipes/src/containers/recipes.tsx

@@ -9,6 +9,7 @@ import { Grid, Row, Cell } from "@material/react-layout-grid";
 import Card from 'components/Card';
 import RecipeCard from 'components/RecipeCard';
 import IRecipe from 'types/recipes';
+import Navbar from 'components/Navbar';
 
 type RecipesContainerProps = {
   data: IRecipe[],
@@ -53,34 +54,44 @@ class Recipes extends Component<RecipesContainerProps> {
       label: 'shopping',
       handler: this.handler
     }];
+    const navbarActions = [{
+      label: 'create recipe',
+      onClick: () => {}
+    }];
 
     return(
-      <Grid>
-        <Row>
-          <Cell columns={6}>
-            {
-              data.map((recipe: any, i: number) => {
-                return (
-                  <Card
-                    key={i}
-                    title={recipe.name}
-                    onClick={this.handleRecipeSelection(recipe)}
-                    summary={recipe.summary}
-                    actions={actions}
-                  />
-                )
-              })
-            }
-          </Cell>
-          <Cell columns={6}>
-            { selectedRecipe !== undefined && 
-              <RecipeCard 
-                recipe={selectedRecipe}
-              />
-            }
-          </Cell>
-        </Row>
-      </Grid>
+      <div>
+        <Navbar
+          title="Recipes"
+          actions={navbarActions}
+        />
+        <Grid>
+          <Row>
+            <Cell columns={6}>
+              {
+                data.map((recipe: any, i: number) => {
+                  return (
+                    <Card
+                      key={i}
+                      title={recipe.name}
+                      onClick={this.handleRecipeSelection(recipe)}
+                      summary={recipe.summary}
+                      actions={actions}
+                    />
+                  )
+                })
+              }
+            </Cell>
+            <Cell columns={6}>
+              { selectedRecipe !== undefined && 
+                <RecipeCard 
+                  recipe={selectedRecipe}
+                />
+              }
+            </Cell>
+          </Row>
+        </Grid>
+      </div>
     )
   }
 }

recipes/src/styles/_spacing.scss

@@ -1,5 +1,5 @@
 $spacing-small: 16px;
-$spacing-regular: 22px;
+$spacing-regular: 24px;
 $spacing-large: 48px;
 $spacing-x-large: 62px;
 $spacing-xx-large: 92px;

recipes/src/styles/app.scss

@@ -31,6 +31,25 @@ h6 {
   font-weight: $font-weight-bold;
   font-size: $font-size-x-large;
 }
+
+h4 {
+  margin: 0;
+  font-family: $font-family-display;
+  font-weight: $font-weight-bold;
+  font-size: $font-size-xx-large;
+}
+
+h4:after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 50px;
+  margin-top: -20px;
+  border-bottom: 16px solid;
+  border-bottom-color: $grey-300;
+  margin-left: -4px;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;