watproto / packages / client / app / components / UserMenu.tsx

import type { RootData } from '@www/lib/useRootData'
import clsx from 'clsx'
import { useFetcher } from 'react-router'
import { Link, Form } from 'react-router'

export default function UserMenu({ user }: { user?: RootData['user'] }) {
  const avatar = user?.profile?.avatar
  const handle = user?.identity.handle
  const fetcher = useFetcher()

  function logout() {
    fetcher.submit(
      { action: 'logout' },
      {
        action: '/login',
        method: 'POST'
      }
    )
  }

  return user ? (
    <div className="flex items-center">
      <div className="dropdown dropdown-end">
        <button
          tabIndex={0}
          className={clsx(
            'avatar btn btn-ghost btn-circle border border-base-200',
            {
              'avatar-placeholder': !avatar
            }
          )}
        >
          {avatar ? (
            <div className="w-10 rounded-full">
              <img src={avatar} alt={handle ?? ''} className="w-10" />
            </div>
          ) : (
            <div className="bg-accent text-base-content w-10 rounded-full">
              <span className="uppercase">{(handle ?? '')[0]}</span>
            </div>
          )}
        </button>
        <ul
          tabIndex={-1}
          className="menu menu-sm dropdown-content bg-base-100 rounded-box z-10 mt-1 w-52 p-2 shadow"
        >
          <p className="mx-2 pt-2 pb-3">
            <span className="text-neutral-400 mr-0.5">@</span>
            {handle}
          </p>
          <li>
            <Link to={`/profile/${handle}`}>Your profile</Link>
          </li>
          <li>
            <Link to="/settings/account">Account settings</Link>
          </li>
          <li>
            <Link to="/settings/delegation">Private posts setup</Link>
          </li>
          <li>
            <button onClick={logout}>Logout</button>
          </li>
        </ul>
      </div>
    </div>
  ) : (
    <div className="flex flex-none gap-3">
      <Link to="/login" className="btn btn-ghost">
        Login
      </Link>
      <Form action="/login" method="POST">
        <button className="btn btn-accent">Join us!</button>
      </Form>
    </div>
  )
}