dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-10 23:38:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

background images, document title

Browse source
This commit is contained in:
Ben Phelps 2022-09-09 06:45:43 +03:00
parent 0b43f83daa
commit 0c8bbdf02b
14 changed files with 105 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/widgets/resources/cpu.jsx
View file

@ -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>
);

10
src/components/widgets/resources/disk.jsx
View file

@ -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>
);

10
src/components/widgets/resources/memory.jsx
View file

@ -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
View 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>
);
}

24
src/components/widgets/search/search.jsx
View file

@ -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>
);