learnhouse/apps/web/components/Security/HeaderProfileBox.tsx

'use client';
import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { Settings } from "lucide-react";
import { useSession } from "@components/Contexts/SessionContext";
import UserAvatar from "@components/Objects/UserAvatar";

export const HeaderProfileBox = () => {
  const session = useSession() as any;

  return (
    <ProfileArea>
      {!session.isAuthenticated && (
        <UnidentifiedArea className="flex text-sm text-gray-700 font-bold p-1.5 px-2 rounded-lg">
          <ul className="flex space-x-3 items-center">
            <li>
              <Link href="/login">
                Login
              </Link>
            </li>
            <li className="bg-black rounded-lg shadow-md p-2 px-3 text-white">
              <Link href="/signup">
                Sign up
              </Link>
            </li>
          </ul>
        </UnidentifiedArea>
      )}
      {session.isAuthenticated && (
        <AccountArea className="space-x-0">
          <div className="flex items-center space-x-2">
            <div className="text-xs">{session.user.username} </div>
            <div className="py-4">
              <UserAvatar border="border-4" rounded='rounded-lg' width={30} />
            </div>
            <Link className="text-gray-600" href={"/dash"}><Settings size={14} /></Link>
          </div>
        </AccountArea>
      )}
    </ProfileArea>
  );
};

const AccountArea = styled.div`
  display: flex;
  place-items: center;
  
  img {
    width: 29px;
  }
`;

const ProfileArea = styled.div`
  display: flex;
  place-items: stretch;
  place-items: center;
`;

const UnidentifiedArea = styled.div`
  display: flex;
  place-items: stretch;
  flex-grow: 1;

  
`;