mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2024-11-17 06:39:25 +08:00
Added initial header
This commit is contained in:
parent
576a5bab9b
commit
df754b09ea
4 changed files with 47 additions and 2 deletions
|
@ -1,5 +1,6 @@
|
||||||
import React from "react";
|
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";
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
@ -11,6 +12,7 @@ const router = createBrowserRouter([
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<Header />
|
||||||
<RouterProvider router={router} />
|
<RouterProvider router={router} />
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
15
src/components/Header/Header.tsx
Normal file
15
src/components/Header/Header.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import AppLogo from "../../components/Icons/AppLogo/AppLogo";
|
import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
|
||||||
import "../../index.css";
|
import "../../index.css";
|
||||||
import styles from "../../styles";
|
import styles from "../../styles";
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,34 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||||
color: "white",
|
color: "white",
|
||||||
fontWeight: "bold",
|
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;
|
export default styles;
|
||||||
|
|
Loading…
Reference in a new issue