Added initial header

This commit is contained in:
Keannu Bernasol 2023-02-14 20:54:18 +08:00
parent 576a5bab9b
commit df754b09ea
4 changed files with 47 additions and 2 deletions

View file

@ -1,5 +1,6 @@
import React from "react";
import Dashboard from "./routes/Dashboard/Dashboard";
import Dashboard from "./Routes/Dashboard/Dashboard";
import Header from "./Components/Header/Header";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
@ -11,6 +12,7 @@ const router = createBrowserRouter([
export default function App() {
return (
<React.StrictMode>
<Header />
<RouterProvider router={router} />
</React.StrictMode>
);

View file

@ -0,0 +1,15 @@
import React from "react";
import AppLogo from "../Icons/AppLogo/AppLogo";
import styles from "../../styles";
export default function Header() {
return (
<div style={styles.header_container}>
<div style={styles.header_left}>
<AppLogo size={64} color="#6f9b78" />
<p style={styles.logo_title}>Ivy</p>
</div>
<div style={styles.header_right}></div>
</div>
);
}

View file

@ -1,5 +1,5 @@
import React from "react";
import AppLogo from "../../components/Icons/AppLogo/AppLogo";
import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
import "../../index.css";
import styles from "../../styles";

View file

@ -16,6 +16,34 @@ const styles: { [key: string]: React.CSSProperties } = {
color: "white",
fontWeight: "bold",
},
logo_title: {
color: "#6c9575",
fontSize: 18,
fontWeight: "bold",
},
header_container: {
display: "flex",
flexDirection: "row",
position: "sticky",
backgroundColor: "#3d4848",
top: 0,
paddingTop: 8,
paddingBottom: 8,
paddingRight: 32,
paddingLeft: 32,
},
header_left: {
display: "flex",
flexDirection: "row",
width: "50%",
justifyContent: "left",
},
header_right: {
display: "flex",
flexDirection: "row",
width: "50%",
justifyContent: "right",
},
};
export default styles;