Spaces:
Runtime error
Runtime error
File size: 3,527 Bytes
cf8b7da 02b9873 6def2c4 cf8b7da 6def2c4 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 2a63a7e cf8b7da 02b9873 2bc79d5 2a63a7e cf8b7da 7d29959 8202034 cf8b7da 02b9873 cf8b7da 6def2c4 cf8b7da 5881efa 53353f2 5881efa 6665e07 6def2c4 2bc79d5 6ffacfe 63bd9dc 6ffacfe f7107ee 6ffacfe 2bc79d5 cf8b7da 6def2c4 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
"use client";
import { useState } from "react";
import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";
import Link from "next/link";
import Image from "next/image";
import { InputGeneration } from "@/components/input-generation";
import { Button } from "@/components/button";
import { useUser } from "@/utils/useUser";
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",
isLogged: true,
icon: <HiHeart className="text-2xl" />,
},
];
export const Main = () => {
const { openWindowLogin, user } = useUser();
const { list_styles, style, setStyle, loading } = useInputGeneration();
const [category, setCategory] = useState<string>("community");
const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
console.log("user", user);
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 flex">
{categories.map(({ key, label, icon, isLogged }) =>
isLogged && !user ? (
<img
key={key}
src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl.svg"
className="cursor-pointer hover:-translate-y-1 transition-all duration-200"
onClick={openWindowLogin}
/>
) : (
<Button
key={key}
disabled={loading}
theme={key !== category ? "white" : "primary"}
onClick={() => setCategory(key)}
>
{icon}
{label}
</Button>
)
)}
</div>
</div>
{user && (
<div className="flex items-center justify-center lg:justify-end text-white text-right text-sm gap-1 mt-4 lg:mt-0">
Logged as
<Link
href={user?.profile}
target="_blank"
className="hover:text-blue-500 flex items-center justify-end gap-2"
>
@{user?.preferred_username}
<Image
src={user?.picture}
width={24}
height={24}
className="rounded-full ring-1 ring-white/60 border border-black"
alt={user?.preferred_username}
/>
</Link>
</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>
);
};
|