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