error fixes

app/components/home-client.tsx

@@ -4,10 +4,14 @@ import Link from 'next/link'
 import startCase from 'lodash/startCase'
 import { ChangeEvent, useState } from 'react'
 import { Input } from '@/components/ui/input'
-import { ITree } from '@/services/github'
+
+interface IFileInfo {
+  path: string;
+  tags?: Array<string>;
+}
 
 interface IHomeClient {
-    files: Array<ITree>;
+    files: Array<IFileInfo>;
 }
 
 export function HomeClient(props : IHomeClient) {
@@ -17,9 +21,19 @@ export function HomeClient(props : IHomeClient) {
       if (!filter) {
         return true
       }
+
+      const filterLower = filter.toLowerCase()
+
       const path = file.path.replace('.md', '')
-      const title = path.replaceAll('-', ' ')
-      return title.includes(filter)
+      const title = path.replaceAll('-', ' ').toLowerCase()
+
+      if (title.includes(filterLower)) {
+        return true
+      }
+
+      const tags = file.tags
+      const found = tags?.find(t => t.toLowerCase().includes(filterLower)) ?? false
+      return found
     }) || []
 
     const handleChange = (evt : ChangeEvent<HTMLInputElement>) => {
@@ -44,11 +58,25 @@ export function HomeClient(props : IHomeClient) {
           </div>
 
           {files.map(file => {
+            const tags = file.tags
             const path = file.path.replace('.md', '')
             const title = startCase(path.replaceAll('-', ' '))
             return (
-              <div key={path}>
+              <div key={path} className="flex justify-between">
                 <Link href={`/${path}`}>{title}</Link>
+                <div>
+                  {tags?.map((tag, index) => {
+                    return (
+                      <span 
+                        key={index}
+                        className="rounded border pl-2 pr-2 cursor-pointer"
+                        onClick={() => setFilter(tag.toLowerCase())}
+                      >
+                        {tag}
+                      </span>
+                    )
+                  })}
+                </div>
               </div>
             )
           })}

app/components/recipe-client.tsx

@@ -3,23 +3,23 @@
 import Link from 'next/link'
 import { Printer, ChevronLeftCircle } from 'lucide-react'
 import { LabelCheckbox } from '@/components/ui/checkbox'
-import { TokensList } from 'marked'
+import { TokensList, Tokens, Token } from 'marked'
 
 
-function CheckboxList({ items }) {
+function CheckboxList({ items } : Tokens.List) {
   return (
     <div className="flex flex-col">
       {items.map((token, idx) => {
         const { text } = token
         return (
-          <LabelCheckbox label={text} />
+          <LabelCheckbox label={text} key={idx}/>
         )
       })}
     </div>
   )
 }
 
-function List({ items, ordered }) {
+function List({ items, ordered } : Tokens.List) {
   if (ordered) {
     return (
       <ol className="list-decimal pl-5">
@@ -78,6 +78,7 @@ export function RecipeClient(props : IRecipeClient) {
         </div>
 
         {tokens.map((token, idx) => {
+          // @ts-ignore
           const { type, text } = token
 
           if (type == 'heading') {
@@ -95,22 +96,22 @@ export function RecipeClient(props : IRecipeClient) {
 
             if (depth == 1) {
               return (
-                <h1 className="pb-2 text-xl font-bold">
+                <h1 className="pb-2 text-xl font-bold" key={idx}>
                   {text}
                 </h1>
               )
             }
 
             return (
-              <h2 className="pb-2 pt-5 text-lg font-semibold">
+              <h2 className="pb-2 pt-5 text-lg font-semibold" key={idx}>
                 {text}
               </h2>
             )
           }
 
           if (type == 'paragraph') {
             return (
-              <p>
+              <p key={idx}>
                 {text}
               </p>
             )
@@ -119,16 +120,18 @@ export function RecipeClient(props : IRecipeClient) {
           if (type == 'list') {
             if (renderState == RENDER_STATE.INGREDIENTS) {
               return (
-                <CheckboxList {...token} />
+                // @ts-ignore
+                <CheckboxList {...token} key={idx}/>
               )
             }
             return (
-              <List {...token} />
+              // @ts-ignore
+              <List {...token} key={idx}/>
             )
           }
 
           return (
-            <div>
+            <div key={idx}>
               {text}
             </div>
           )

app/page.tsx

@@ -1,8 +1,34 @@
 import { getFileList } from '../services/github'
 import { HomeClient } from './components/home-client'
+import { marked } from 'marked'
 
 export default async function Home() {
-  const files = await getFileList()
+  let files = await getFileList()
+
+  // pull tags from every recipe, strip down the data we send in files
+  files = await Promise.all(files.map(async (file) => {
+    const url = `https://raw.githubusercontent.com/bit-shift-io/the-great-cook-up/main/${file.path}`
+    const data = await fetch(url).then(r => r.text())
+    const tokens = marked.lexer(data)
+
+    // @ts-ignore
+    const tagsToken = tokens.find(t => t?.text?.toLowerCase().startsWith('tags:'))
+    if (!tagsToken) {
+      return {
+        path: file.path
+      }
+    }
+
+    // @ts-ignore
+    let tags = tagsToken?.text?.replace('Tags:', '').replace('tags:', '').split(',')
+    // @ts-ignore
+    tags = tags.map(tag => tag.trim())
+    return {
+      path: file.path,
+      tags
+    }
+  }))
+
 
   return (
     <HomeClient files={files}/>

components/ui/checkbox.tsx

@@ -27,8 +27,7 @@ const Checkbox = React.forwardRef<
 ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-
-export function LabelCheckbox({ label }) {
+export function LabelCheckbox({ label } : { label: string}) {
   const id = useId()
   return (
     <div className="flex items-center space-x-2">