UI enhancement
This commit is contained in:
parent
45e3898acb
commit
23239c5cb6
5 changed files with 225 additions and 129 deletions
|
|
@ -1,12 +1,17 @@
|
|||
import { useState } from "react";
|
||||
import { senderAvatar } from "../utils/senderAvatar";
|
||||
|
||||
export default function SenderAvatar({ email, className = "" }) {
|
||||
const { name, initials, color, imageUrl } = senderAvatar(email);
|
||||
const { initials, color, imageUrl, brandUrl, isBrand } = senderAvatar(email);
|
||||
const [broken, setBroken] = useState(false);
|
||||
const src = imageUrl || brandUrl;
|
||||
|
||||
if (imageUrl) {
|
||||
if (src && !broken) {
|
||||
return (
|
||||
<span className={`sender-avatar${className ? ` ${className}` : ""}`}>
|
||||
<img src={imageUrl} alt="" aria-hidden="true" />
|
||||
<span
|
||||
className={`sender-avatar${isBrand ? " sender-avatar-brand" : ""}${className ? ` ${className}` : ""}`}
|
||||
>
|
||||
<img src={src} alt="" aria-hidden="true" onError={() => setBroken(true)} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue