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

Polished initial page

Browse source
This commit is contained in:
Keannu Bernasol 2023-02-13 23:54:15 +08:00
parent 421d8e865b
commit 4e2fb294c2
3 changed files with 50 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/App.tsx
View file

@ -1,14 +1,15 @@
import React from "react"; import React from "react";
import logo from "./img/ivy.svg"; import AppLogo from "./components/Icons/AppLogo/AppLogo";
import styles from "./styles"; import styles from "./styles";
export default function App() { export default function App() {
return ( return (
<div style={styles.background}> <div style={styles.background}>
<body style={styles.background}> <div style={styles.flex_row}>
<img src={logo} alt="logo" /> <AppLogo size={64} color="#6f9b78" />
<p>Ivy - Inventory Manager</p> <p>Ivy - Inventory Manager</p>
</body> </div>
<p>Welcome!</p>
</div> </div>
); );
} }

29
src/components/Icons/AppLogo/AppLogo.tsx Normal file
View file

@ -0,0 +1,29 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function AppLogo(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
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="M2 9a10 10 0 1 0 20 0"></path>
<path d="M12 19a10 10 0 0 1 10 -10"></path>
<path d="M2 9a10 10 0 0 1 10 10"></path>
<path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
<path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
</svg>
);
}

18
src/styles.tsx
View file

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