50 lines
1014 B
TypeScript
50 lines
1014 B
TypeScript
import React from "react";
|
|
import classNames from "classnames";
|
|
|
|
export type Props = {
|
|
/**
|
|
* The style avatar
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* The path of image
|
|
*/
|
|
src?: string;
|
|
/**
|
|
* The alternative text in case the image is not valid
|
|
*/
|
|
alt?: string;
|
|
/**
|
|
* The text inside avatar as a child
|
|
*/
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
const Avatar = ({ className, src, alt, children }: Props) => {
|
|
return (
|
|
<div>
|
|
{/* In case the src is valid, it will show the image */}
|
|
{src && (
|
|
<img
|
|
className="h-9 w-9 bg-contain bg-no-repeat rounded-full"
|
|
src={src}
|
|
alt={alt}
|
|
/>
|
|
)}
|
|
{/* The text will be shown in case it is valid */}
|
|
{children && (
|
|
<div
|
|
className={classNames(
|
|
"h-9 w-9 flex justify-center items-center text-base rounded-full bg-red-400",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar;
|