mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
Further improvements to simplify information widgets
Signed-off-by: Denis Papec <denis.papec@gmail.com>
This commit is contained in:
parent
cd5162e39c
commit
6f750dd83c
12 changed files with 181 additions and 267 deletions
22
src/components/widgets/widget/resource.jsx
Normal file
22
src/components/widgets/widget/resource.jsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import UsageBar from "../resources/usage-bar";
|
||||
|
||||
export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
|
||||
const Icon = icon;
|
||||
|
||||
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
|
||||
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
|
||||
<div className="flex flex-col ml-3 text-left min-w-[85px]">
|
||||
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5">{value}</div>
|
||||
<div className="pr-1">{label}</div>
|
||||
</div>
|
||||
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5">{expandedValue}</div>
|
||||
<div className="pr-1">{expandedLabel}</div>
|
||||
</div>
|
||||
}
|
||||
{ percentage && <UsageBar percent={percentage} /> }
|
||||
{ children }
|
||||
</div>
|
||||
</div>;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue