Move separator into its own component

This commit is contained in:
Foster Hangdaan 2023-07-26 22:02:15 -04:00
parent 5b4e167c40
commit e0f710a5e0
Signed by: foster
GPG key ID: E48D7F49A852F112
5 changed files with 27 additions and 20 deletions

View file

@ -1,17 +1,14 @@
export interface Props { export interface Props {
heading: string; heading: string;
subheading?: string; subheading?: string;
comp: any;
} }
export default function(props: Props) { export default function(props: Props) {
return ( return (
<header className="page-header"> <header className="page-header">
<h1>{ props.heading }</h1> <h1>{ props.heading }</h1>
<div className="separator"> {props.comp.separator()}
<span className="outer-outline"/>
<span className="icon">󱀝</span>
<span className="outer-outline"/>
</div>
<p className="subheading">{ props.subheading }</p> <p className="subheading">{ props.subheading }</p>
</header> </header>
) )

View file

@ -0,0 +1,9 @@
export default function () {
return (
<div className="separator">
<span className="outer-outline"/>
<span className="icon">󱀝</span>
<span className="outer-outline"/>
</div>
);
}

View file

@ -89,21 +89,6 @@ .page-header {
.subheading { .subheading {
font-style: italic; font-style: italic;
} }
.separator {
margin: 1rem 0;
span {
display: inline-block;
vertical-align: middle;
}
.outer-outline {
width: 40%;
border: 1px solid var(--color-black);
}
.icon {
font-size: 2rem;
color: var(--color-black);
}
}
} }
@for $i from 1 to 3 { @for $i from 1 to 3 {

View file

@ -0,0 +1,15 @@
.separator {
margin: 1rem 0;
span {
display: inline-block;
vertical-align: middle;
}
.outer-outline {
width: 40%;
border: 1px solid var(--color-black);
}
.icon {
font-size: 2rem;
color: var(--color-black);
}
}

View file

@ -9,3 +9,4 @@
// Components // Components
@import "styles/components/navbar"; @import "styles/components/navbar";
@import "styles/components/separator";