From 658b957b20dff660f0cc0a357cb229a63365c48b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Wed, 10 Aug 2022 15:11:32 +0300
Subject: [PATCH] Avatar - image or text inside

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

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 0000000..32ce50b
--- /dev/null
+++ b/src/components/Avatar.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import classNames from "classnames";
+
+export type Props = {
+  /**
+   * The style avatar
+   */
+  className?: string;
+  /**
+   * The path of image
+   */
+  src?: string;
+  /**
+   * The alternative text in case the image is not valid
+   */
+  alt?: string;
+  /**
+   * The text inside avatar as a child
+   */
+  children?: React.ReactNode;
+};
+
+const Avatar = ({ className, src, alt, children }: Props) => {
+  return (
+    <div>
+      {/* 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"
+          src={src}
+          alt={alt}
+        />
+      )}
+      {/* The text will be shown in case it is valid */}
+      {children && (
+        <div
+          className={classNames(
+            "h-9 w-9 flex justify-center items-center text-base rounded-full bg-red-400",
+            className
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Avatar;