mirror of
https://github.com/lemeow125/EquipmentTracker-Frontend.git
synced 2024-11-17 06:09:25 +08:00
Added initial header
This commit is contained in:
parent
9c4a5fd4fb
commit
2b5fe8171c
3 changed files with 27 additions and 6 deletions
23
src/Components/Header/Header.tsx
Normal file
23
src/Components/Header/Header.tsx
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import styles, { colors } from "../../styles";
|
||||||
|
|
||||||
|
export interface props {
|
||||||
|
label: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Header(props: props) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "sticky",
|
||||||
|
top: 0,
|
||||||
|
zIndex: -1,
|
||||||
|
backgroundColor: colors.header_color,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ ...styles.text_light, ...styles.text_M }}>{props.label}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -116,7 +116,7 @@ export default function LoginModal() {
|
||||||
type={"dark"}
|
type={"dark"}
|
||||||
label={"Login"}
|
label={"Login"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate(0);
|
navigate("/dashboard");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,13 +1,11 @@
|
||||||
|
import Header from "../../Components/Header/Header";
|
||||||
import styles from "../../styles";
|
import styles from "../../styles";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
return (
|
return (
|
||||||
<div style={styles.background}>
|
<div style={styles.background}>
|
||||||
<p style={{ ...styles.text_dark, ...styles.text_M }}>
|
<Header label={"Dashboard"} />
|
||||||
CITC EQUIPMENT
|
<p style={{ ...styles.text_dark, ...styles.text_M }}>Dashboard Page</p>
|
||||||
<br />
|
|
||||||
TRACKER
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue