Files
progress-test/app/javascript/components/UserAvatar/UserAvatar.tsx
2022-07-22 12:53:57 -03:00

29 lines
729 B
TypeScript

import React, {FC} from "react";
import {User} from "../../__generated__/graphql-schema";
import BoringAvatar from "boring-avatars";
type Props = {
user: User
className?: string
}
export const UserAvatar: FC<Props> = ({user, className}) => {
return (
<div className={`rounded-full border-2 border-primary-light shadow ${className || ''}`}>
{user.avatarUrl ?
<img
className="rounded-full"
src={user.avatarUrl}
alt={`Avatar do usuário ${user.name}`}
/>
: <BoringAvatar
size={"100%"}
name={user.name}
variant="pixel"
colors={["#595F72", "#575D90", "#84A07C", "#C3D350", "#E6F14A"]}
/>
}
</div>
)
};