keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added some design for the dashboard

Browse source
This commit is contained in:
Keannu Bernasol 2023-02-17 19:20:39 +08:00
parent 837ef24eff
commit 6c69cd438a
6 changed files with 179 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/ColoredCube/ColoredCube.tsx Normal file
View file

@ -0,0 +1,20 @@
import { PropaneSharp } from "@mui/icons-material";
import React from "react";
export interface props {
color: string;
size: number;
}
export default function ColoredCube(props: props) {
return (
<div style={{ paddingRight: 8 }}>
<div
style={{
backgroundColor: props.color,
width: props.size,
height: props.size,
}}
/>
</div>
);
}

29
src/components/DashboardContainer/DashboardContainer.tsx Normal file
View file

@ -0,0 +1,29 @@
import React from "react";
export interface props {
children: React.ReactNode;
width: string;
height: string;
}
export default function DashboardContainer(props: props) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignSelf: "flex-start",
justifyContent: "left",
backgroundColor: "#1d3b33",
borderRadius: 16,
padding: 8,
paddingLeft: 48,
width: props.width,
height: props.height,
lineHeight: 0.4,
}}
>
{props.children}
</div>
);
}

30
src/components/Icons/StatsIcon/StatsIcon.tsx Normal file
View file

@ -0,0 +1,30 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function StatsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size}
height={props.size}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M9 15v2"></path>
<path d="M12 11v6"></path>
<path d="M15 13v4"></path>
</svg>
</div>
);
}

35
src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function TotalProductsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size}
height={props.size}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M2 13.5v5.5l5 3"></path>
<path d="M7 16.545l5 -3.03"></path>
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M12 19l5 3"></path>
<path d="M17 16.5l5 -3"></path>
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
<path d="M7 5.03v5.455"></path>
<path d="M12 8l5 -3"></path>
</svg>
</div>
);
}

38
src/routes/Dashboard/Dashboard.tsx
View file

@ -1,14 +1,44 @@
import React from "react";
import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
import DashboardContainer from "../../Components/DashboardContainer/DashboardContainer";
import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
import "../../index.css";
import styles from "../../styles";
import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
import ColoredCube from "../../Components/ColoredCube/ColoredCube";
export default function Dashboard() {
return (
<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 style={styles.wrapper_row}>
<HomeIcon size={64} color="white" />
<h1 style={styles.text_large}>Dashboard</h1>
</div>
<DashboardContainer width="70%" height="30%">
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_dashboard_2}>Total Products</h1>
</div>
<h1 style={styles.text_dashboard_1}>2546 Unique Items</h1>
<h1 style={styles.text_dashboard_1}>In inventory</h1>
</DashboardContainer>
<div style={{ padding: 16 }} />
<DashboardContainer width="50%" height="40%">
<div style={styles.wrapper_row}>
<StatsIcon size={64} color="white" />
<h1 style={styles.text_dashboard_1}>Current Session</h1>
</div>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a48e41" />
<h1 style={styles.text_medium}>Added</h1>
</div>
<h1 style={styles.text_dashboard_1}>254</h1>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a44141" />
<h1 style={styles.text_medium}>Removed</h1>
</div>
<h1 style={styles.text_dashboard_1}>64</h1>
</DashboardContainer>
</div>
);
}

32
src/styles.tsx
View file

@ -13,13 +13,32 @@ const styles: { [key: string]: React.CSSProperties } = {
flex: 1,
height: "100%",
alignItems: "center",
paddingTop: 32,
paddingTop: 0,
paddingLeft: 16,
},
text: {
fontSize: 16,
color: "white",
fontWeight: "bold",
},
text_medium: {
fontSize: 26,
color: "white",
fontWeight: "bold",
},
text_large: {
fontSize: 36,
color: "white",
fontWeight: "bold",
},
text_dashboard_1: {
fontSize: 46,
color: "white",
},
text_dashboard_2: {
fontSize: 56,
color: "white",
},
logo_title: {
color: "#6c9575",
fontSize: 26,
@ -90,6 +109,17 @@ const styles: { [key: string]: React.CSSProperties } = {
backgroundColor: "#3d4848",
alignItems: "flex-end",
},
wrapper_row: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
wrapper_column: {
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "50%",
},
};
export default styles;