From af62f49b27a6ddceb2d3ac7308f1738c6ed4a9ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Tue, 30 Aug 2022 15:07:56 +0300
Subject: [PATCH] Edited Avatar

---
 src/components/Avatar.tsx | 42 +++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 32ce50b..7678fce 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 
 export type Props = {
   /**
@@ -20,13 +20,47 @@ export type Props = {
   children?: React.ReactNode;
 };
 
+// Choosing random color for the avatar background
+function getRandomInt(max: number) {
+  return Math.floor(Math.random() * max);
+}
+let colors: string[] = [
+  "bg-red-400",
+  "bg-orange-400",
+  "bg-green-400",
+  "bg-amber-400",
+  "bg-yellow-400",
+  "bg-lime-400",
+  "bg-emerald-400",
+  "bg-teal-400",
+  "bg-cyan-400",
+  "bg-sky-400",
+  "bg-blue-400",
+  "bg-indigo-400",
+  "bg-violet-400",
+  "bg-purple-400",
+  "bg-fuchsia-400",
+];
+
 const Avatar = ({ className, src, alt, children }: Props) => {
+  const wrapperClasses = src ? "" : colors[getRandomInt(colors.length)];
+  const position = src ? "relative pt-[100%]" : "";
   return (
-    <div>
+    <div
+      className={classNames(
+        wrapperClasses,
+        position,
+        "rounded-full  ",
+        className
+      )}
+    >
       {/* 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"
+          className={classNames(
+            "h-9 w-9 rounded-full absolute top-1/2 left-1/2 object-cover -translate-x-1/2	-translate-y-1/2",
+            className
+          )}
           src={src}
           alt={alt}
         />
@@ -35,7 +69,7 @@ const Avatar = ({ className, src, alt, children }: Props) => {
       {children && (
         <div
           className={classNames(
-            "h-9 w-9 flex justify-center items-center text-base rounded-full bg-red-400",
+            "h-9 w-9 flex justify-center items-center text-base  text-white",
             className
           )}
         >