first commit

frontend/src/components/SenderAvatar.jsx

@@ -0,0 +1,23 @@
+import { senderAvatar } from "../utils/senderAvatar";
+
+export default function SenderAvatar({ email, className = "" }) {
+  const { name, initials, color, imageUrl } = senderAvatar(email);
+
+  if (imageUrl) {
+    return (
+      <span className={`sender-avatar${className ? ` ${className}` : ""}`}>
+        <img src={imageUrl} alt="" aria-hidden="true" />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={`sender-avatar${className ? ` ${className}` : ""}`}
+      style={{ backgroundColor: color }}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  );
+}