mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
background images, document title
This commit is contained in:
parent
0b43f83daa
commit
0c8bbdf02b
14 changed files with 105 additions and 44 deletions
|
@ -2,6 +2,7 @@ import useSWR from "swr";
|
|||
import { FiCpu } from "react-icons/fi";
|
||||
import { BiError } from "react-icons/bi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Cpu() {
|
||||
const { t } = useTranslation();
|
||||
|
@ -41,14 +42,7 @@ export default function Cpu() {
|
|||
<div className="text-theme-800 dark:text-theme-200 text-xs">
|
||||
{t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
|
||||
<div
|
||||
className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
|
||||
style={{
|
||||
width: `${percent}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<UsageBar percent={percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -2,6 +2,7 @@ import useSWR from "swr";
|
|||
import { FiHardDrive } from "react-icons/fi";
|
||||
import { BiError } from "react-icons/bi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Disk({ options }) {
|
||||
const { t } = useTranslation();
|
||||
|
@ -44,14 +45,7 @@ export default function Disk({ options }) {
|
|||
<span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
|
||||
{t("common.bytes", { value: data.drive.totalGb * 1024 * 1024 * 1024 })} {t("resources.total")}
|
||||
</span>
|
||||
<div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
|
||||
<div
|
||||
className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
|
||||
style={{
|
||||
width: `${percent}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<UsageBar percent={percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -2,6 +2,7 @@ import useSWR from "swr";
|
|||
import { FaMemory } from "react-icons/fa";
|
||||
import { BiError } from "react-icons/bi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import UsageBar from "./usage-bar";
|
||||
|
||||
export default function Memory() {
|
||||
const { t } = useTranslation();
|
||||
|
@ -44,14 +45,7 @@ export default function Memory() {
|
|||
<span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
|
||||
{t("common.bytes", { value: data.memory.usedMemMb * 1024 * 1024 })} {t("resources.used")}
|
||||
</span>
|
||||
<div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
|
||||
<div
|
||||
className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
|
||||
style={{
|
||||
width: `${percent}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<UsageBar percent={percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
12
src/components/widgets/resources/usage-bar.jsx
Normal file
12
src/components/widgets/resources/usage-bar.jsx
Normal file
|
@ -0,0 +1,12 @@
|
|||
export default function UsageBar({ percent }) {
|
||||
return (
|
||||
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20">
|
||||
<div
|
||||
className="bg-theme-800/70 h-1 rounded-full dark:bg-white/50"
|
||||
style={{
|
||||
width: `${percent}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -52,19 +52,33 @@ export default function Search({ options }) {
|
|||
|
||||
return (
|
||||
<form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
|
||||
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200" />
|
||||
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
|
||||
<input
|
||||
type="search"
|
||||
className="overflow-hidden w-full placeholder-theme-900 text-xs text-theme-900 bg-theme-50 rounded-md border border-theme-300 focus:ring-theme-500 focus:border-theme-500 dark:bg-theme-800 dark:border-theme-600 dark:placeholder-theme-400 dark:text-white dark:focus:ring-theme-500 dark:focus:border-theme-500 h-full"
|
||||
type="text"
|
||||
className="
|
||||
overflow-hidden w-full h-full rounded-md
|
||||
text-xs text-theme-900 dark:text-white
|
||||
placeholder-theme-900 dark:placeholder-white/80
|
||||
bg-white/50 dark:bg-white/10
|
||||
focus:ring-theme-500 dark:focus:ring-white/50
|
||||
focus:border-theme-500 dark:focus:border-white/50
|
||||
border border-theme-300 dark:border-theme-200/50"
|
||||
placeholder={t("search.placeholder")}
|
||||
onChange={(s) => setQuery(s.currentTarget.value)}
|
||||
required
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white absolute right-0.5 bottom-0.5 bg-theme-700 hover:bg-theme-800 border-1 focus:ring-2 focus:ring-theme-300 font-medium rounded-r-md text-sm px-4 py-2 dark:bg-theme-600 dark:hover:bg-theme-700 dark:focus:ring-theme-500"
|
||||
className="
|
||||
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
|
||||
text-white font-medium text-sm
|
||||
bg-theme-600/40 dark:bg-white/10
|
||||
focus:ring-theme-500 dark:focus:ring-white/50"
|
||||
>
|
||||
<provider.icon className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
||||
<provider.icon className="text-white w-3 h-3" />
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue