Spaces:
Runtime error
Runtime error
File size: 2,307 Bytes
2a63a7e 848e268 9df11bd ebf0eb6 6665e07 cf8b7da 6665e07 848e268 cf8b7da ebf0eb6 cf8b7da 848e268 cf8b7da 848e268 cf8b7da 2a63a7e 63bd9dc 848e268 6665e07 25c0ab6 3bd9858 8202034 25c0ab6 cf8b7da 6665e07 2a63a7e 9df11bd 2a63a7e 3bd9858 6665e07 2a63a7e cf8b7da 9df11bd cf8b7da |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
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";
export const InputGeneration: React.FC = () => {
const { prompt, setPrompt, submit, loading } = useInputGeneration();
const [value, setValue] = useState<string>(prompt);
const input = useRef<HTMLInputElement>(null);
useUpdateEffect(() => setValue(prompt), [prompt]);
return (
<div
className="bg-white rounded-full p-3 w-full max-w-3xl flex items-center justify-between group transition-all duration-200 focus-within:ring-[6px] focus-within:ring-primary border-[2px] border-white focus-within:ring-opacity-40 focus-within:border-primary gap-3"
onClick={() => input.current?.focus()}
>
<div className="flex items-center gap-3 pl-3 w-full">
<HiLightBulb className="text-2xl text-gray-400 group-focus-within:text-primary transition-all duration-200" />
<input
ref={input}
value={value}
type="text"
className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none truncate"
placeholder="A red car, forest in the background"
onChange={(e) => setValue(e.target.value)}
onBlur={() => setPrompt(value)}
onKeyDown={(e) => {
if (e.key === "Enter" && (value || prompt) && !loading) {
setPrompt(value);
setTimeout(() => {
submit();
}, 10);
}
}}
/>
</div>
<button
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",
{
"animate-pulse": loading,
}
)}
onClick={() => {
if ((!value && !prompt) || loading) return;
submit();
}}
>
<span className="hidden lg:block">
{loading ? "Generating..." : "Generate"}
</span>
<HiSearch className="w-5 h-5 lg:hidden" />
</button>
</div>
);
};
|