Spaces:
Runtime error
Runtime error
File size: 2,499 Bytes
cf8b7da 02b9873 cf8b7da 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 2a63a7e cf8b7da 02b9873 2a63a7e cf8b7da 02b9873 cf8b7da 02b9873 cf8b7da 5881efa 9df11bd 02b9873 9df11bd 02b9873 9df11bd 2a63a7e cf8b7da 2a63a7e cf8b7da 02b9873 cf8b7da cca515d 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 65 66 67 68 69 70 71 72 73 74 75 |
"use client";
import { useState } from "react";
import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";
import { InputGeneration } from "@/components/input-generation";
import { Button } from "@/components/button";
import { useInputGeneration } from "./hooks/useInputGeneration";
import { Collections } from "./collections";
import { Settings } from "./settings";
const categories = [
{
key: "community",
label: "Community",
icon: <HiUserGroup className="text-2xl" />,
},
{
key: "my-own",
label: "My generations",
icon: <HiHeart className="text-2xl" />,
},
];
export const Main = () => {
const { prompt, setPrompt, submit, loading, list_styles, style, setStyle } =
useInputGeneration();
const [category, setCategory] = useState<string>("community");
const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
return (
<main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
<div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
<div className="flex flex-col lg:flex-row items-center justify-between w-full">
<div className="flex items-center justify-start gap-3 w-full flex-col lg:flex-row">
<InputGeneration
prompt={prompt}
onChange={setPrompt}
onSubmit={submit}
loading={loading}
/>
<p
className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-2 lg:mt-0"
onClick={() => setAdvancedSettings(!advancedSettings)}
>
<HiAdjustmentsHorizontal className="w-5 h-5" />
Advanced settings
</p>
</div>
<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
key={key}
theme={key !== category ? "white" : "primary"}
onClick={() => setCategory(key)}
>
{icon}
{label}
</Button>
))}
</div>
</div>
<Settings
open={advancedSettings}
style={style}
setStyle={setStyle}
list_styles={list_styles}
/>
</div>
<Collections category={category} />
</main>
);
};
|