user displayed

components/main/index.tsx

@@ -2,14 +2,16 @@
 
 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";
-import { useUser } from "@/utils/useUser";
 
 const categories = [
   {
@@ -31,12 +33,14 @@ export const Main = () => {
   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 hidden lg:flex">
+          <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
@@ -59,6 +63,25 @@ export const Main = () => {
             )}
           </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"

next.config.js

@@ -10,6 +10,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "huggingface.co",
       },
+      {
+        protocol: "https",
+        hostname: "aeiljuispo.cloudimg.io",
+      },
     ],
   },
 }