From 1c56730ed7e85e3e2eba6ba69741d73d3876decb Mon Sep 17 00:00:00 2001
From: George Gebbett <github@georgegebbett.co.uk>
Date: Fri, 19 Apr 2024 15:22:13 +0100
Subject: [PATCH] Allow editing recipe title (#485)

---
 .../(dashboard)/recipes/[id]/recipeForm.tsx   | 20 +++++++++++--------
 src/components/recipe-title-input.tsx         | 15 ++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 src/components/recipe-title-input.tsx

diff --git a/src/app/(dashboard)/recipes/[id]/recipeForm.tsx b/src/app/(dashboard)/recipes/[id]/recipeForm.tsx
index 7fb7e28..ef1db0b 100644
--- a/src/app/(dashboard)/recipes/[id]/recipeForm.tsx
+++ b/src/app/(dashboard)/recipes/[id]/recipeForm.tsx
@@ -9,12 +9,12 @@ import {
 } from "~/server/api/modules/grocy/procedures/createRecipeInGrocySchema"
 import { api } from "~/trpc/react"
 import { RouterOutputs } from "~/trpc/shared"
-import { FormProvider, useForm } from "react-hook-form"
+import { Controller, FormProvider, useForm } from "react-hook-form"
 import { toast } from "sonner"
 
 import { Button } from "~/components/ui/button"
-import { DashboardHeader } from "~/components/header"
 import { IngredientTable } from "~/components/ingredient-table"
+import { RecipeTitleInput } from "~/components/recipe-title-input"
 
 type RecipeFormProps = {
   recipeId: number
@@ -73,18 +73,22 @@ function RecipeFormInner({
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <input hidden {...form.register("recipeBuddyRecipeId")} />
-        <DashboardHeader
-          heading={recipe.name}
-          className="flex-col items-start gap-2"
-        >
+        <div className="flex flex-col gap-2">
+          <Controller
+            render={({ field }) => (
+              <RecipeTitleInput value={field.value} onChange={field.onChange} />
+            )}
+            name="recipeName"
+            control={form.control}
+          />
           <Link
             href={recipe.url}
-            className="text-muted-foreground text-lg"
+            className="text-muted-foreground pl-1 text-lg"
             target="_blank"
           >
             View Original
           </Link>
-        </DashboardHeader>
+        </div>
         <div className="flex flex-col gap-2">
           <IngredientTable grocyBaseUrl={grocyBaseUrl ?? ""} />
           <Button type="submit" isLoading={mutLoading} className="self-end">
diff --git a/src/components/recipe-title-input.tsx b/src/components/recipe-title-input.tsx
new file mode 100644
index 0000000..e1c2ada
--- /dev/null
+++ b/src/components/recipe-title-input.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { cn } from "~/lib/utils"
+import { Input, InputProps } from "~/components/ui/input"
+
+interface RecipeTitleInputProps extends InputProps {}
+
+export function RecipeTitleInput({
+  className,
+  ...props
+}: RecipeTitleInputProps) {
+  return (
+    <Input className={cn("py-6 text-3xl md:text-4xl", className)} {...props} />
+  )
+}