jan/web/app/_components/UserToolbar/index.tsx

"use client";

import { currentConversationAtom } from "@/_helpers/JotaiWrapper";
import { useAtomValue } from "jotai";
import Image from "next/image";

const UserToolbar: React.FC = () => {
  const currentConvo = useAtomValue(currentConversationAtom);

  const avatarUrl = currentConvo?.image;
  const title = currentConvo?.name ?? "";

  return (
    <div className="flex items-center gap-3 p-1">
      <Image
        className="rounded-full aspect-square w-8 h-8"
        src={avatarUrl ?? "icons/app_icon.svg"}
        alt=""
        width={36}
        height={36}
      />
      <span className="flex gap-[2px] leading-6 text-base font-semibold">
        {title}
      </span>
    </div>
  );
};

export default UserToolbar;