From 303617b4fdc86c3b167b71ab4c41e586895fa310 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:34:27 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20Avatar=20?=
 =?UTF-8?q?component=20=F0=9F=96=BC=EF=B8=8F=20Added=20a=20new=20Avatar=20?=
 =?UTF-8?q?component=20with=20customization=20options=20=E2=9C=A8=20Enhanc?=
 =?UTF-8?q?es=20user=20profile=20visuals=20=F0=9F=90=9B=20Fixed=20minor=20?=
 =?UTF-8?q?issues=20in=20the=20Avatar=20component=20=F0=9F=9A=80=20Ready?=
 =?UTF-8?q?=20to=20use=20Avatars=20in=20the=20project!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Avatar.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/shared/Avatar.tsx

diff --git a/src/shared/Avatar.tsx b/src/shared/Avatar.tsx
new file mode 100644
index 0000000..8c746a2
--- /dev/null
+++ b/src/shared/Avatar.tsx
@@ -0,0 +1,59 @@
+import { avatarColors } from "@/contains/contants";
+import React, { FC } from "react";
+import avatar1 from "@/images/avatars/Image-1.png";
+import Image, { StaticImageData } from "next/image";
+
+export interface AvatarProps {
+  containerClassName?: string;
+  sizeClass?: string;
+  radius?: string;
+  imgUrl?: string | StaticImageData;
+  userName?: string;
+  hasChecked?: boolean;
+  hasCheckedClass?: string;
+}
+
+const Avatar: FC<AvatarProps> = ({
+  containerClassName = "ring-1 ring-white dark:ring-neutral-900",
+  sizeClass = "h-6 w-6 text-sm",
+  radius = "rounded-full",
+  imgUrl = avatar1,
+  userName,
+  hasChecked,
+  hasCheckedClass = "w-4 h-4 -top-0.5 -right-0.5",
+}) => {
+  const url = imgUrl || "";
+  const name = userName || "John Doe";
+  const _setBgColor = (name: string) => {
+    const backgroundIndex = Math.floor(
+      name.charCodeAt(0) % avatarColors.length
+    );
+    return avatarColors[backgroundIndex];
+  };
+
+  return (
+    <div
+      className={`wil-avatar relative flex-shrink-0 inline-flex items-center justify-center text-neutral-100 uppercase font-semibold shadow-inner ${radius} ${sizeClass} ${containerClassName}`}
+      style={{ backgroundColor: url ? undefined : _setBgColor(name) }}
+    >
+      {url && (
+        <Image
+          className={`absolute inset-0 w-full h-full object-cover ${radius}`}
+          src={url}
+          alt={name}
+        />
+      )}
+      <span className="wil-avatar__name">{name[0]}</span>
+
+      {hasChecked && (
+        <span
+          className={` bg-teal-500 rounded-full text-white text-xs flex items-center justify-center absolute  ${hasCheckedClass}`}
+        >
+          <i className="las la-check"></i>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Avatar;