Avatar

Avatar.tsx

import React from 'react';
import './Avatar.css';

const avatarData = {
  imageUrl: "https://randomuser.me/api/portraits/women/80.jpg",
  altText: "Profile Picture",
  size: 100,
}

type AvatarProps = {
  imageUrl: string;
  altText: string;
  size: number;
};

const Avatar = ({ imageUrl, altText, size }: AvatarProps) => {
  return (
    <div className="avatar" style={{ width: size, height: size }}>
      <img src={imageUrl} alt={altText} />
    </div>
  );
};

export default Avatar;

Avatar.module.css

.avatar {
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
}

.avatar img {
  width: 100%;
  height: auto;
}