From e8dece678bae02695de0fa27e45e7437406bffaa Mon Sep 17 00:00:00 2001
From: "adam.shaikh" <adam.shaikh@niveussolutions.com>
Date: Fri, 7 Jan 2022 12:50:27 +0530
Subject: [PATCH] image component

---
 src/components/Image/Image.scss | 11 +++++++++++
 src/components/Image/index.jsx  | 21 +++++++++++++++++++++
 src/components/index.js         |  2 ++
 3 files changed, 34 insertions(+)
 create mode 100644 src/components/Image/Image.scss
 create mode 100644 src/components/Image/index.jsx

diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss
new file mode 100644
index 0000000..2e6768d
--- /dev/null
+++ b/src/components/Image/Image.scss
@@ -0,0 +1,11 @@
+
+.card-profile-image  {
+  position: absolute;
+  left: 50%;
+  max-width: 140px;
+  transition: all .15s ease;
+  transform: translate(-50%,-50%) scale(1);
+  border: 3px solid #fff;
+  border-radius: 0.375rem;
+  vertical-align: middle;
+}
diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
new file mode 100644
index 0000000..f6e840e
--- /dev/null
+++ b/src/components/Image/index.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./Image.scss";
+
+// Profile Image common components
+function Image({src, width}) {
+    return (
+        <>
+            <div className="mt-7 card-profile-image">  
+                <img src={src} width={width}  className="rounded-circle card-profile-image"/>
+            </div>
+        </>
+    );
+}
+
+Image.propTypes = {
+    src: PropTypes.string,
+    width: PropTypes.string
+};
+
+export default Image;
diff --git a/src/components/index.js b/src/components/index.js
index 1fdf438..e4f3c34 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,3 @@
 export { default as Button } from "./Button";
+export { default as Image } from "./image";
+
-- 
GitLab