input field

components/input-generation.tsx

@@ -2,20 +2,10 @@ import classNames from "classnames";
 import { useRef, useState } from "react";
 import { HiLightBulb, HiSearch } from "react-icons/hi";
 import { useUpdateEffect } from "react-use";
+import { useInputGeneration } from "./main/hooks/useInputGeneration";
 
-interface Props {
-  prompt: string;
-  loading: boolean;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-}
-
-export const InputGeneration: React.FC<Props> = ({
-  prompt,
-  loading,
-  onChange,
-  onSubmit,
-}) => {
+export const InputGeneration: React.FC = () => {
+  const { prompt, setPrompt, submit, loading } = useInputGeneration();
   const [value, setValue] = useState<string>(prompt);
   const input = useRef<HTMLInputElement>(null);
 
@@ -35,16 +25,16 @@ export const InputGeneration: React.FC<Props> = ({
           className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none truncate"
           placeholder="A thug cat riding his small bike"
           onChange={(e) => setValue(e.target.value)}
-          onBlur={() => onChange(value)}
+          onBlur={() => setPrompt(value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && prompt && !loading) {
-              onSubmit();
+            if (e.key === "Enter" && (value || prompt) && !loading) {
+              submit();
             }
           }}
         />
       </div>
       <button
-        disabled={!prompt}
+        disabled={!prompt && !value}
         className={classNames(
           "bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-2 lg:px-4 py-2 text-base transition-all duration-200",
           {
@@ -52,8 +42,8 @@ export const InputGeneration: React.FC<Props> = ({
           }
         )}
         onClick={() => {
-          if (!prompt || loading) return;
-          onSubmit();
+          if ((!value && !prompt) || loading) return;
+          submit();
         }}
       >
         <span className="hidden lg:block">

components/main/hooks/useInputGeneration.ts

@@ -1,8 +1,8 @@
-import { useId, useState } from "react"
+import { useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useLocalStorage } from 'react-use';
 
-import { Collection, Image } from "@/utils/type"
+import { Image } from "@/utils/type"
 import list_styles from "@/assets/list_styles.json"
 import { useCollection } from "@/components/modal/useCollection";
 

components/main/index.tsx

@@ -24,8 +24,7 @@ const categories = [
 ];
 
 export const Main = () => {
-  const { prompt, setPrompt, submit, loading, list_styles, style, setStyle } =
-    useInputGeneration();
+  const { list_styles, style, setStyle } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
   const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
 
@@ -33,12 +32,7 @@ export const Main = () => {
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
-          <InputGeneration
-            prompt={prompt}
-            onChange={setPrompt}
-            onSubmit={submit}
-            loading={loading}
-          />
+          <InputGeneration />
           <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
             {categories.map(({ key, label, icon }) => (
               <Button