Spaces:
Runtime error
Runtime error
File size: 4,105 Bytes
cf8b7da 02b9873 6def2c4 7dc9f9f cf8b7da 6def2c4 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 7dc9f9f cf8b7da 02b9873 2bc79d5 7dc9f9f cf8b7da 7dc9f9f cf8b7da 7d29959 7dc9f9f 8202034 cf8b7da 02b9873 cf8b7da 5881efa 53353f2 5881efa 6665e07 7dc9f9f 2bc79d5 6ffacfe 63bd9dc 7dc9f9f f7107ee 6ffacfe 2bc79d5 cf8b7da 7dc9f9f 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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
"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 classNames from "classnames";
import { createBreakpoint } from "react-use";
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-lg lg:text-2xl" />,
},
{
key: "my-own",
label: "My generations",
isLogged: true,
icon: <HiHeart className="text-lg lg:text-2xl" />,
},
];
const useBreakpoint = createBreakpoint({ L: 1024, XS: 640 });
export const Main = () => {
const { openWindowLogin, user } = useUser();
const breakpoint = useBreakpoint();
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 flex-col lg:flex-row 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-${
breakpoint === "XS" ? "lg" : "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>
<div
className={classNames(
"flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0",
{
"text-gray-300 text-xs": !user?.sub,
"text-white text-sm": user?.sub,
}
)}
>
{user?.sub ? (
<>
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>
</>
) : (
"to save your generations in your own gallery"
)}
</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>
);
};
|