Spaces:
Runtime error
Runtime error
File size: 2,120 Bytes
2a63a7e 848e268 9df11bd cf8b7da 2a63a7e cf8b7da 2a63a7e cf8b7da 2a63a7e 848e268 cf8b7da 848e268 cf8b7da 848e268 cf8b7da 2a63a7e cf8b7da 848e268 25c0ab6 cf8b7da 2a63a7e 9df11bd 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 61 62 63 64 |
import classNames from "classnames";
import { useRef, useState } from "react";
import { HiLightBulb, HiSearch } from "react-icons/hi";
interface Props {
prompt: string;
loading: boolean;
onChange: (value: string) => void;
onSubmit: () => void;
}
export const InputGeneration: React.FC<Props> = ({
prompt,
loading,
onChange,
onSubmit,
}) => {
const [value, setValue] = useState<string>(prompt);
const input = useRef<HTMLInputElement>(null);
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 thug cat riding his small bike"
onChange={(e) => setValue(e.target.value)}
onBlur={() => onChange(value)}
onKeyDown={(e) => {
if (e.key === "Enter" && prompt && !loading) {
onSubmit();
}
}}
/>
</div>
<button
disabled={!prompt}
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 (!prompt || loading) return;
onSubmit();
}}
>
<span className="hidden lg:block">
{loading ? "Generating..." : "Generate"}
</span>
<HiSearch className="w-5 h-5 lg:hidden" />
</button>
</div>
);
};
|