Added routing structure and polished Dashboard

This commit is contained in:
Keannu Bernasol 2023-02-14 20:29:42 +08:00
parent 4e2fb294c2
commit 576a5bab9b
3 changed files with 38 additions and 26 deletions

View file

@ -1,15 +1,17 @@
import React from "react";
import AppLogo from "./components/Icons/AppLogo/AppLogo";
import styles from "./styles";
import Dashboard from "./routes/Dashboard/Dashboard";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Dashboard />,
},
]);
export default function App() {
return (
<div style={styles.background}>
<div style={styles.flex_row}>
<AppLogo size={64} color="#6f9b78" />
<p>Ivy - Inventory Manager</p>
</div>
<p>Welcome!</p>
</div>
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
}

View file

@ -0,0 +1,16 @@
import React from "react";
import AppLogo from "../../components/Icons/AppLogo/AppLogo";
import "../../index.css";
import styles from "../../styles";
export default function Dashboard() {
return (
<div style={styles.background}>
<div style={styles.container}>
<AppLogo size={64} color="#6f9b78" />
<p style={styles.text}>Ivy - Inventory Manager</p>
<p style={styles.text}>Welcome to the Dashboard</p>
</div>
</div>
);
}

View file

@ -1,27 +1,21 @@
import React from "react";
const styles: { [key: string]: React.CSSProperties } = {
background: {
backgroundColor: "#0b2322",
height: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "center",
height: "100vh",
},
container: {
display: "flex",
flexDirection: "column",
flex: 1,
alignItems: "center",
fontWeight: "bold",
},
text: {
fontSize: 16,
color: "white",
},
flex_row: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
header: {
display: "flex",
flexDirection: "row",
position: "sticky",
top: 0,
left: 0,
fontWeight: "bold",
},
};
export default styles;