fruit name field

src/components/FruitNameField.tsx

@@ -0,0 +1,19 @@
+import { TextField, type TextFieldProps } from "codeforlife/components/form"
+import { type FC } from "react"
+
+import { fruitNameSchema } from "../app/schemas"
+
+export interface FruitNameFieldProps
+  extends Omit<TextFieldProps, "name" | "label" | "placeholder" | "schema"> {}
+
+const FruitNameField: FC<FruitNameFieldProps> = props => (
+  <TextField
+    name="name"
+    label="Name"
+    placeholder="Enter the fruit's name"
+    schema={fruitNameSchema}
+    {...props}
+  />
+)
+
+export default FruitNameField

src/components/index.tsx

@@ -0,0 +1,2 @@
+export { default as FruitNameField } from "./FruitNameField"
+export * from "./FruitNameField"

src/pages/fruitDetail/FruitDetail.tsx

@@ -12,7 +12,7 @@ import {
   useLazyRetrieveFruitQuery,
   useUpdateFruitMutation,
 } from "../../api/fruit"
-import { fruitNameSchema } from "../../app/schemas"
+import { FruitNameField } from "../../components"
 import { paths } from "../../routes"
 
 export interface FruitDetailProps {}
@@ -38,12 +38,7 @@ const FruitDetail: FC<FruitDetailProps> = () => {
               })}
             >
               <Stack>
-                <forms.TextField
-                  name="name"
-                  label="Name"
-                  placeholder="Enter the fruit's name"
-                  schema={fruitNameSchema}
-                />
+                <FruitNameField />
                 <forms.CheckboxField
                   name="is_citrus"
                   formControlLabelProps={{ label: "Is Citrus" }}

src/pages/fruitList/CreateFruitForm.tsx

@@ -3,7 +3,7 @@ import { FormHelperText, Stack } from "@mui/material"
 import { type FC } from "react"
 import { submitForm } from "codeforlife/utils/form"
 
-import { fruitNameSchema } from "../../app/schemas"
+import { FruitNameField } from "../../components"
 import { useCreateFruitMutation } from "../../api/fruit"
 
 export interface CreateFruitFormProps {}
@@ -25,13 +25,7 @@ const CreateFruitForm: FC<CreateFruitFormProps> = () => {
         })}
       >
         <Stack>
-          <forms.TextField
-            required
-            name="name"
-            label="Name"
-            placeholder="Enter the fruit's name"
-            schema={fruitNameSchema}
-          />
+          <FruitNameField />
           <forms.CheckboxField
             name="is_citrus"
             formControlLabelProps={{ label: "Is Citrus" }}