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