Spaces:
Runtime error
Runtime error
File size: 2,340 Bytes
cf8b7da 02b9873 cf8b7da 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 2a63a7e cf8b7da 02b9873 2a63a7e cf8b7da 02b9873 cf8b7da 02b9873 cf8b7da 5881efa 5240c42 9df11bd 2a63a7e cf8b7da 2a63a7e cf8b7da 5240c42 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 |
"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">
<InputGeneration
prompt={prompt}
onChange={setPrompt}
onSubmit={submit}
loading={loading}
/>
<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>
<p
className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-3"
onClick={() => setAdvancedSettings(!advancedSettings)}
>
<HiAdjustmentsHorizontal className="w-5 h-5" />
Advanced settings
</p>
<Settings
open={advancedSettings}
style={style}
setStyle={setStyle}
list_styles={list_styles}
/>
</div>
<Collections category={category} />
</main>
);
};
|