Create a separater component to separate components
This commit is contained in:
parent
e46def6967
commit
a87e591c50
2 changed files with 26 additions and 0 deletions
13
src/components/separater/Separater.jsx
Normal file
13
src/components/separater/Separater.jsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
|
||||
import styles from "./Separater.module.css";
|
||||
|
||||
function Separator({ width = "50%", thickness = "2px" }) {
|
||||
return (
|
||||
<div className={styles.separatorContainer}>
|
||||
<div className={styles.separator} style={{ width, height: thickness }}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Separator;
|
||||
13
src/components/separater/Separater.module.css
Normal file
13
src/components/separater/Separater.module.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.separatorContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
background-color: var(--accent-color);
|
||||
opacity: 0.6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue