kitchn/next-recipes/pages/recipes/index.tsx

import Layout from "@/components/Layout";
import { GetStaticProps, InferGetStaticPropsType } from "next";
import { getAllRecipes, getAllTags } from '@/utils/api';
import Header from '@/components/Layout/Header';
import Container from '@/components/Layout/Container';
import { useRouter } from 'next/router';

import { Subtitle } from 'components/Typography';
import RecipeItem from "components/RecipeItem";
import { TextInput, ChipGroup, Chip } from "@/components/Forms";
import { MouseEventHandler } from "react";


export const getStaticProps = async () => {
  const recipeList = await getAllRecipes();
  const tags = await getAllTags();
  return {
    props: {
      recipeList,
      tags: tags.map(tag => tag.name),
    },
  };
};

const Recipes = ({
  recipeList = [],
  tags
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  const router = useRouter();
  const openRecipe: (id: string) => MouseEventHandler<Element> = (id) => (e) => {
    e.preventDefault();
    router.push(`/recipes/${id}`);
  }

  return (
    <Layout>
      <Header>
        <TextInput placeholder='search' id='recipe-search' />
        <ChipGroup>
          {tags.map(tag => (
            <Chip key={tag} label={tag} color='primary' />
          ))}
        </ChipGroup>
      </Header>
      <Container>
        <Subtitle>Favorites</Subtitle>
      </Container>
      <Container>
        <Subtitle>All</Subtitle>
        {recipeList.map((recipe) => (
          <RecipeItem recipe={recipe} key={recipe._id} onClick={openRecipe(recipe._id)} />
        ))}
      </Container>
    </Layout>
  );
};

export default Recipes;