keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-12 09:31:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separated all the widgets in the dashboard into their own components

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-07 21:17:22 +08:00
parent 6619163abe
commit 3b5fb87099
12 changed files with 405 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx Normal file
View file

@ -0,0 +1,44 @@
import * as React from "react";
import styles from "../../../styles";
import ColoredCube from "../../ColoredCube/ColoredCube";
import StatsIcon from "../../Icons/StatsIcon/StatsIcon";
import { useSelector } from "react-redux";
import { SessionTransactions } from "../../../Interfaces/Interfaces";
export interface props {}
export default function SessionStatsWidget() {
const session_added = useSelector(
(state: SessionTransactions) => state.session_transactions.added
);
const session_removed = useSelector(
(state: SessionTransactions) => state.session_transactions.removed
);
return (
<div
style={{
...styles.widget,
...{ flex: 5 },
}}
>
<div style={styles.content_row}>
<StatsIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_XL }}>
Current Session
</p>
</div>
<div style={styles.content_row}>
<ColoredCube size={32} color="#a48e41" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Added</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_L }}>{session_added}</p>
<div style={styles.content_row}>
<ColoredCube size={32} color="#a44141" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Removed</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_XL }}>
{session_removed}
</p>
</div>
);
}