diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss new file mode 100644 index 0000000000000000000000000000000000000000..2e6768d96587f10d3178fc1a4a2839d35d57a732 --- /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 0000000000000000000000000000000000000000..f6e840ed42e527c5f6a3c0cf2bdd920c34344812 --- /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 1fdf4382e5bd73f112a978acdddd4aa444265db1..e4f3c34bc38bfd1e20de5b11d630b343c8349734 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"; +