Spaces:
Runtime error
Runtime error
File size: 2,587 Bytes
cf8b7da 02b9873 cf8b7da 4f2c36e 2a63a7e 4f2c36e 02b9873 31f62e8 cf8b7da 2a63a7e cf8b7da 02b9873 2bc79d5 2a63a7e cf8b7da 2bc79d5 31f62e8 8202034 cf8b7da 02b9873 cf8b7da 5881efa 53353f2 5881efa 6665e07 9df11bd 2bc79d5 31f62e8 2bc79d5 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 69 70 71 72 73 74 75 76 77 78 |
"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";
import { useUser } from "@/utils/useUser";
const categories = [
{
key: "community",
label: "Community",
icon: <HiUserGroup className="text-2xl" />,
},
{
key: "my-own",
label: "My generations",
isLogged: true,
icon: <HiHeart className="text-2xl" />,
},
];
export const Main = () => {
const user = false;
const { openWindowLogin } = useUser();
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, isLogged }) =>
isLogged && !user ? (
<Button key={key} theme="white" onClick={openWindowLogin}>
Sign in with Hugging Face
</Button>
) : (
<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>
);
};
|