next-recipes/components/Layout/Container/container.module.css

@@ -0,0 +1,3 @@
+.container {
+  @apply p-4;
+}

next-recipes/components/Layout/Container/index.tsx

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import styles from './container.module.css';
+
+interface ContainerProps {
+};
+
+const Container: FunctionComponent<ContainerProps> = ({ children }) => (
+  <div className={styles.container}>{children}</div>
+);
+
+export default Container;

next-recipes/components/Layout/Header/header.module.css

@@ -0,0 +1,3 @@
+.headerContainer {
+  @apply sticky top-0 p-4 z-10 bg-white;
+}

next-recipes/components/Layout/Header/index.tsx

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+
+import styles from './header.module.css';
+
+interface HeaderProps { };
+
+const Header: FunctionComponent<HeaderProps> = ({ children }) => {
+  return (
+    <div className={styles.headerContainer}>{children}</div>
+  );
+};
+
+export default Header;

next-recipes/components/Layout/layout.module.css

@@ -1,3 +1 @@
-.layout {
-  @apply p-4;
-}
+.layout {}

next-recipes/pages/recipes.tsx

@@ -1,38 +1,48 @@
 import Layout from "@/components/Layout";
 import { GetStaticProps, InferGetStaticPropsType } from "next";
-import { Recipe } from "types/recipes";
+import { getAllRecipes, getAllTags } from '@/utils/api';
+import Header from '@/components/Layout/Header';
+import Container from '@/components/Layout/Container';
+
 import { Subtitle } from 'components/Typography';
 import RecipeItem from "components/RecipeItem";
-import { TextInput } from "@/components/Forms";
-import { Button } from "@/components/Button";
+import { TextInput, ChipGroup, Chip } from "@/components/Forms";
+
 
 export const getStaticProps = async () => {
-  const res = await fetch("http://localhost:3000/recipes/all/");
-  const recipeList: Recipe[] = await res.json();
+  const recipeList = await getAllRecipes();
+  const tags = await getAllTags();
   return {
     props: {
       recipeList,
+      tags: tags.map(tag => tag.name),
     },
   };
 };
 
 const Recipes = ({
   recipeList = [],
+  tags
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <Layout>
-      <div>
+      <Header>
         <TextInput placeholder='search' id='recipe-search' />
-      </div>
-      <div>
+        <ChipGroup>
+          {tags.map(tag => (
+            <Chip key={tag} label={tag} color='primary' />
+          ))}
+        </ChipGroup>
+      </Header>
+      <Container>
         <Subtitle>Favorites</Subtitle>
-      </div>
-      <div>
+      </Container>
+      <Container>
         <Subtitle>All</Subtitle>
         {recipeList.map((recipe, index) => (
           <RecipeItem recipe={recipe} key={index} onClick={() => console.log(recipe.name)} />
         ))}
-      </div>
+      </Container>
     </Layout>
   );
 };

next-recipes/utils/api.ts

@@ -0,0 +1,35 @@
+import { Recipe } from "@/types/recipes";
+
+async function api<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  return await response.json();
+}
+
+async function mockAPI<T>(data: T): Promise<T> {
+  return new Promise((resolve) => {
+    resolve(data);
+  })
+}
+
+export const getAllRecipes = () => api<Recipe[]>(`${process.env.API_RECIPES}/all/`)
+
+type Tag = {
+  name: string,
+};
+
+export const getAllTags = () => mockAPI<Tag[]>(
+  [
+    { name: 'Dinner' },
+    { name: 'Snack' },
+    { name: 'Dessert' },
+    { name: 'Lunch' }
+  ]
+);
+
+export default {
+  getAllRecipes,
+  getAllTags,
+};