diff options
Diffstat (limited to 'admin/src/components/Card')
-rw-r--r-- | admin/src/components/Card/Card.jsx | 13 | ||||
-rw-r--r-- | admin/src/components/Card/Card.module.css | 26 |
2 files changed, 39 insertions, 0 deletions
diff --git a/admin/src/components/Card/Card.jsx b/admin/src/components/Card/Card.jsx new file mode 100644 index 0000000..9460955 --- /dev/null +++ b/admin/src/components/Card/Card.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './Card.module.css' + +const Card = ({ title, image, onClick }) => { + return ( + <div onClick={ onClick } className={styles.card}> + <img className={styles.card__image} src={image} alt="" /> + <h2 className={styles.card__title}>{title}</h2> + </div> + ) +} + +export default Card diff --git a/admin/src/components/Card/Card.module.css b/admin/src/components/Card/Card.module.css new file mode 100644 index 0000000..e351fd5 --- /dev/null +++ b/admin/src/components/Card/Card.module.css @@ -0,0 +1,26 @@ +@import '../../styles/GlobalVariables.css'; + +.card { + height: 300px; + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px solid var(--color-black); + border-radius: 10px; + margin: 30px; + transition: 0.2s all; + cursor: pointer; + color: var(--color-black); + text-decoration-line: none; +} + +.card:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px var(--color-shadow); +} + +.card__title { + margin: 15px 0px; +} |