Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-30 23:35:37 +08:00
Code Issues Projects Releases Wiki Activity

feat: add bg color and text color for stats

Browse Source
This commit is contained in:
kunish 2023-08-28 00:28:06 +08:00
parent 4aeaa2c545
commit c27316967b
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/Overview.tsx
View File

@ -134,38 +134,44 @@ export const Overview = () => {
return ( return (
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="stats w-full shadow"> <div class="stats w-full bg-primary shadow">
<div class="stat"> <div class="stat">
<div class="stat-title">Upload</div> <div class="stat-title text-secondary-content">Upload</div>
<div class="stat-value"> <div class="stat-value text-primary-content">
{byteSize(traffic()?.up || 0).toString()}/s {byteSize(traffic()?.up || 0).toString()}/s
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-title">Download</div> <div class="stat-title text-secondary-content">Download</div>
<div class="stat-value"> <div class="stat-value text-primary-content">
{byteSize(traffic()?.down || 0).toString()}/s {byteSize(traffic()?.down || 0).toString()}/s
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-title">Upload Total</div> <div class="stat-title text-secondary-content">Upload Total</div>
<div class="stat-value"> <div class="stat-value text-primary-content">
{byteSize(connection()?.uploadTotal || 0).toString()} {byteSize(connection()?.uploadTotal || 0).toString()}
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-title">Download Total</div> <div class="stat-title text-secondary-content">Download Total</div>
<div class="stat-value"> <div class="stat-value text-primary-content">
{byteSize(connection()?.downloadTotal || 0).toString()} {byteSize(connection()?.downloadTotal || 0).toString()}
</div> </div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-title">Active Connections</div> <div class="stat-title text-secondary-content">
<div class="stat-value">{connection()?.connections.length || 0}</div> Active Connections
</div>
<div class="stat-value text-primary-content">
{connection()?.connections.length || 0}
</div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-title">Memory Usage</div> <div class="stat-title text-secondary-content">Memory Usage</div>
<div class="stat-value">{byteSize(memory() || 0).toString()}</div> <div class="stat-value text-primary-content">
{byteSize(memory() || 0).toString()}
</div>
</div> </div>
</div> </div>