UserAvatar

useravatar-1779375413924.tsx

'use client';

import { useState } from 'react';

interface UserRole {
  name: string;
  color: string;
}

interface UserProfile {
  name: string;
  email: string;
  role: UserRole;
  avatar: string | null;
}

const demoProfile: UserProfile = {
  name: 'John Doe',
  email: 'john@example.com',
  role: { name: 'Admin', color: 'bg-yellow-500' },
  avatar: null,
};

const UserAvatar = () => {
  const [showDropdown, setShowDropdown] = useState(false);

  const handleAvatarClick = () => {
    setShowDropdown(!showDropdown);
  };

  const handleLogout = () => {
    // Add logout logic here
    console.log('Logged out');
  };

  return (
    <div className="relative inline-block">
      <button
        className="flex items-center justify-center w-10 h-10 bg-zinc-950 text-gold rounded-full hover:bg-zinc-800 transition duration-300"
        onClick={handleAvatarClick}
      >
        {demoProfile.avatar ? (
          <img src={demoProfile.avatar} alt={demoProfile.name} className="w-10 h-10 rounded-full" />
        ) : (
          <span className="text-2xl font-bold text-gold">{demoProfile.name.charAt(0).toUpperCase()}</span>
        )}
      </button>
      {showDropdown && (
        <div
          className="absolute right-0 top-12 bg-zinc-950 rounded-lg shadow-lg py-2 w-48 z-10"
          onClick={(e) => e.stopPropagation()}
        >
          <div className="px-4 py-2 flex items-center">
            <span className="text-gold mr-2">{demoProfile.name}</span>
            <span
              className={`py-1 px-2 text-xs rounded-lg ${demoProfile.role.color}`}
            >
              {demoProfile.role.name}
            </span>
          </div>
          <ul>
            <li>
              <a
                href="#"
                className="block py-2 px-4 text-gold hover:bg-zinc-800 transition duration-300"
              >
                Profile
              </a>
            </li>
            <li>
              <a
                href="#"
                className="block py-2 px-4 text-gold hover:bg-zinc-800 transition duration-300"
              >
                Settings
              </a>
            </li>
            <li>
              <a
                href="#"
                className="block py-2 px-4 text-gold hover:bg-zinc-800 transition duration-300"
              >
                Billing
              </a>
            </li>
            <li>
              <button
                className="block py-2 px-4 text-gold hover:bg-zinc-800 transition duration-300 w-full"
                onClick={handleLogout}
              >
                Logout
              </button>
            </li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default UserAvatar;

Component info

CategoryAuthentication

Frameworkreact

TierFREE

Copies0

About

User avatar with dropdown menu

More from Authentication

'use client';

import React, { useState } from 'react';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');

LoginForm

Authentication

'use client';

import { useState } from 'react';

interface SignupFormProps {
  // No props for this component
}

const SignupForm: React.FC<SignupFormProps> = () => {
  const [step, setStep] = useState(1);
  const [email, setEmail] = useState('');

SignupForm

Authentication

'use client';

import { useState, useEffect } from 'react';

interface TwoFactorAuthProps {
  onSubmit: (code: string) => void;
}

const TwoFactorAuth = ({ onSubmit }: TwoFactorAuthProps) => {
  const [code, setCode] = useState(['', '', '', '', '', '

TwoFactorAuth

Authentication

'use client';

import React, { useState } from 'react';

interface ForgotPasswordProps {
  // No props needed for this component
}

const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
  const [email, setEmail] = useState('');
  const [isSub

ForgotPassword

Authentication