Spaces:
Runtime error
Runtime error
File size: 2,219 Bytes
cf8b7da 02b9873 cf8b7da 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 2a63a7e cf8b7da 02b9873 2a63a7e cf8b7da 8202034 cf8b7da 02b9873 cf8b7da 5881efa 53353f2 5881efa 6665e07 9df11bd 2a63a7e cf8b7da 8202034 cf8b7da 2a63a7e cf8b7da 8d1be70 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 |
"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 { list_styles, style, setStyle, loading } = 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-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
<div className="flex flex-col lg:flex-row items-center justify-between w-full">
<InputGeneration />
<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}
disabled={loading}
theme={key !== category ? "white" : "primary"}
onClick={() => setCategory(key)}
>
{icon}
{label}
</Button>
))}
</div>
</div>
</div>
<p
className="text-white/70 font-medium text-sm flex items-center justify-center lg: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}
/>
<Collections category={category} />
</main>
);
};
|