File size: 2,556 Bytes
67ea2ab c23b289 2a7eb2e 67ea2ab c23b289 67ea2ab c23b289 67ea2ab 93233eb 67ea2ab b857757 93233eb 67ea2ab 93233eb 67ea2ab 93233eb 67ea2ab cf3bb20 2a7eb2e 67ea2ab 2a7eb2e 67ea2ab |
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
"use client";
import { useState } from "react";
import { Form } from "@/_types";
import { generate } from "@/app/_actions/generate";
import { Brand } from "./step/brand";
import { Steps } from "./step/list";
import { Industry } from "./step/industry";
import { Description } from "./step/description";
import classNames from "classnames";
import { toast } from "react-toastify";
import Image from "next/image";
export const Generation = () => {
const [form, setForm] = useState<Form>({
brand_name: "",
display_name: false,
description: "",
industry: "",
style: "",
});
const [loading, setLoading] = useState<boolean>(false);
const [result, setResult] = useState<number | undefined>(undefined);
const handleGenerate = async () => {
if (loading) return;
setLoading(true);
try {
const response = await generate(form);
setResult(response.data);
} catch (err) {
toast.error("An error occurred. Please try again later.");
} finally {
setLoading(false);
}
};
return (
<main id="generation" className="w-full py-10 lg:py-20">
<h3 className="max-w-4xl text-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
Start your <span className="text-white">generation</span> here.
</h3>
<Steps form={form} />
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-20">
<Brand form={form} setForm={setForm} />
<Description form={form} setForm={setForm} />
<Industry form={form} setForm={setForm} />
<div className="lg:col-span-3 flex items-center justify-center">
<button
className={classNames(
"max-lg:w-full rounded-full bg-white text-zinc-950 font-medium text-sm px-6 py-3 hover:bg-opacity-80 transition-all duration-150 disabled:bg-zinc-500 disabled:text-zinc-700",
{
"animate-pulse": loading,
}
)}
disabled={!form.brand_name || !form.description || !form.industry}
onClick={handleGenerate}
>
{loading ? "Generating..." : "Generate my Logo"}
</button>
</div>
{result && (
<div className="lg:col-span-3 flex items-center justify-center rounded-3xl">
<Image
src={`/api/images/${result}`}
alt="Generated logo"
className="h-[300px]"
width={400}
height={400}
/>
</div>
)}
</div>
</main>
);
};
|