commerce/components/auth/user-icon.tsx

'use client';
import { User2Icon } from 'lucide-react';
import clsx from 'clsx';
import { Button } from 'components/ui/button';

function UserButton(props: any) {
  const buttonClasses =
    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
  //const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';

  return (
    <>
      <Button
        asChild
        variant="link"
        aria-label="My Profile"
        className={clsx(buttonClasses, {
          'hover:opacity-90': true
        })}
      >
        {/*Purposesly a href here and NOT Link component b/c of router caching*/}
        <a href="/account">
          <User2Icon className="mr-2 h-4 w-4" />
          <span>Profile</span>
        </a>
      </Button>
    </>
  );
}

export function UserIcon() {
  return <UserButton />;
}