mirror of
https://github.com/karl0ss/homepage.git
synced 2025-04-29 12:03:41 +01:00
b39c79bea1
* First commit for custom styles and JS * Adjusted classes * Added ids and classes for services and bookmarks * Apply suggestions from code review * Remove mime dependency * Update settings.json * Detect custom css / js changes, no refresh * Added preload to custom scripts and styles so they can load earlier * Added data attribute name for bookmarks too * Update [path].js * code style, revert some pointer changes --------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
23 lines
1.1 KiB
JavaScript
23 lines
1.1 KiB
JavaScript
import UsageBar from "../resources/usage-bar";
|
|
|
|
export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false, additionalClassNames='' }) {
|
|
const Icon = icon;
|
|
|
|
return <div className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${ additionalClassNames }`}>
|
|
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon"/>
|
|
<div className={ `flex flex-col ml-3 text-left min-w-[85px] ${ expanded ? ' expanded' : ''}`}>
|
|
<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 >= 0 && <UsageBar percent={percentage} additionalClassNames="resource-usage" /> }
|
|
{ children }
|
|
</div>
|
|
</div>;
|
|
}
|