Spaces:
Runtime error
Runtime error
File size: 4,221 Bytes
cf8b7da 02b9873 6def2c4 7dc9f9f cf8b7da 6def2c4 4f2c36e 2a63a7e 4f2c36e 02b9873 cf8b7da 7dc9f9f cf8b7da 02b9873 2bc79d5 7dc9f9f cf8b7da 17f8f56 7dc9f9f cf8b7da 7d29959 7dc9f9f 8202034 cf8b7da 02b9873 cf8b7da 5881efa 53353f2 5881efa 6665e07 7dc9f9f 2bc79d5 17f8f56 63bd9dc 7dc9f9f 17f8f56 7dc9f9f 17f8f56 6ffacfe 2bc79d5 cf8b7da 357c712 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 121 122 123 |
"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({ XL: 1280, L: 1024, S: 768, 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 ? (
<Image
key={key}
src={`https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-${
["XS", "S"].includes(breakpoint) ? "lg" : "xl"
}.svg`}
width="100"
height="32"
alt="Sign in with Hugging Face"
className="cursor-pointer hover:-translate-y-1 transition-all duration-200 w-auto object-contain"
onClick={openWindowLogin}
/>
) : (
<Button
key={key}
disabled={loading}
theme={key !== category ? "white" : "primary"}
onClick={() => setCategory(key)}
>
{icon}
{label}
</Button>
)
)}
</div>
</div>
</div>
<div
className={classNames(
"flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0 pr-2 lg:pr-4",
{
"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>
<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>
);
};
|