Avatar - image or text inside

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;