feat: show site avatar if logged

Author: Innei

src/components/layout/header/internal/UserAuth.tsx

@@ -5,9 +5,11 @@ import { AnimatePresence } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import { usePathname } from 'next/navigation'
 
+import { useIsLogged } from '~/atoms'
 import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { urlBuilder } from '~/lib/url-builder'
+import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
 import { HeaderActionButton } from './HeaderActionButton'
 
@@ -28,9 +30,24 @@ const SignInButton = dynamic(() =>
   import('@clerk/nextjs').then((mod) => mod.SignInButton),
 )
 
+const OwnerAvatar = () => {
+  const ownerAvatar = useAggregationSelector((s) => s.user.avatar)!
+
+  return (
+    <div className="pointer-events-auto flex h-10 w-10 items-center justify-center overflow-hidden rounded-full">
+      <img src={ownerAvatar} alt="site owner" />
+    </div>
+  )
+}
 export function UserAuth() {
   const pathname = usePathname()
 
+  const isLogged = useIsLogged()
+
+  if (isLogged) {
+    return <OwnerAvatar />
+  }
+
   return (
     <AnimatePresence>
       <SignedIn key="user-info">