m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-13 23:53:48 -05:00
Code Wiki Activity

Switch to Lucide Icons

Browse Source
This commit is contained in:
Sergio
2025-02-15 12:50:59 +02:00
parent 550fb955a3
commit f79d7ff03a
8 changed files with 34 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/bun.lockb
View File

Binary file not shown.

2
web/package.json
View File

@@ -13,10 +13,10 @@
"dependencies": {
"@headlessui/react": "^2.1.10",
"@radix-ui/react-tooltip": "^1.1.2",
"@tabler/icons-react": "^3.14.0",
"caniuse-lite": "^1.0.30001698",
"clsx": "^2.1.1",
"date-fns": "^3.6.0",
"lucide-react": "^0.475.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"tailwind-merge": "^2.5.2",

6
web/src/components/CodeBlock.tsx
View File

@@ -1,6 +1,6 @@
import { ReactNode, useState } from "react";
import { theme } from "../theme";
import { IconCheck, IconClipboard } from "@tabler/icons-react";
import { Clipboard, ClipboardCheck } from "lucide-react";
export function CodeBlock({
children,
@@ -29,7 +29,7 @@ export function CodeBlock({
{enableCopy &&
navigator.clipboard &&
(copySuccess ? (
<IconCheck
<ClipboardCheck
className={`absolute right-3 size-7 bg-${theme}-100 py-1 pl-2 dark:bg-${theme}-950`}
/>
) : (
@@ -37,7 +37,7 @@ export function CodeBlock({
className={`duration-50 absolute right-3 bg-${theme}-100 py-1 pl-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-${theme}-950`}
onClick={handleCopy(`docker pull ${children}`)}
>
<IconClipboard className="size-5" />
<Clipboard className="size-5" />
</button>
))}
</div>

44
web/src/components/Image.tsx
View File

@@ -5,19 +5,11 @@ import {
DialogPanel,
DialogTitle,
} from "@headlessui/react";
import {
IconAlertTriangleFilled,
IconCircleArrowUpFilled,
IconCircleCheckFilled,
IconCube,
IconHelpCircleFilled,
IconStopwatch,
IconX,
} from "@tabler/icons-react";
import { WithTooltip } from "./Tooltip";
import type { Image } from "../types";
import { theme } from "../theme";
import { CodeBlock } from "./CodeBlock";
import { Box, CircleArrowUp, CircleCheck, HelpCircle, Timer, TriangleAlert, X } from "lucide-react";
const clickable_registries = [
"registry-1.docker.io",
@@ -53,7 +45,7 @@ export default function Image({ data }: { data: Image }) {
<>
<button onClick={handleOpen} className="w-full">
<li className="flex items-center gap-4 break-all px-6 py-4 text-start">
<IconCube className="size-6 shrink-0" />
<Box className="size-6 shrink-0" />
{data.reference}
<Icon data={data} />
</li>
@@ -73,7 +65,7 @@ export default function Image({ data }: { data: Image }) {
className={`flex flex-col gap-3 px-6 py-4 text-${theme}-400 dark:text-${theme}-600`}
>
<div className="mb-4 flex items-center gap-3">
<IconCube className="size-6 shrink-0 text-black dark:text-white" />
<Box className="size-6 shrink-0 text-black dark:text-white" />
<DialogTitle className="text-black dark:text-white">
{url ? (
<>
@@ -103,21 +95,21 @@ export default function Image({ data }: { data: Image }) {
)}
</DialogTitle>
<button onClick={handleClose} className="ml-auto">
<IconX className="size-6 shrink-0 text-gray-500" />
<X className="size-6 shrink-0 text-gray-500" />
</button>
</div>
<div className="flex items-center gap-3">
<DialogIcon data={data} />
</div>
<div className="mb-4 flex items-center gap-3">
<IconStopwatch className="size-6 shrink-0 text-gray-500" />
<Timer className="size-6 shrink-0 text-gray-500" />
<span>
Checked in <b>{data.time}</b> ms
</span>
</div>
{data.result.error && (
<div className="break-before mb-4 flex items-center gap-3 overflow-hidden rounded-md bg-yellow-400/10 px-3 py-2">
<IconAlertTriangleFilled className="size-6 shrink-0 text-yellow-500" />
<TriangleAlert className="size-6 shrink-0 text-yellow-500" />
{data.result.error}
</div>
)}
@@ -164,7 +156,7 @@ function Icon({ data }: { data: Image }) {
text="Unknown"
className="ml-auto size-6 shrink-0 text-gray-500"
>
<IconHelpCircleFilled />
<HelpCircle />
</WithTooltip>
);
case false:
@@ -173,7 +165,7 @@ function Icon({ data }: { data: Image }) {
text="Up to date"
className="ml-auto size-6 shrink-0 text-green-500"
>
<IconCircleCheckFilled />
<CircleCheck />
</WithTooltip>
);
case true:
@@ -185,7 +177,7 @@ function Icon({ data }: { data: Image }) {
text="Major Update"
className="ml-auto size-6 shrink-0 text-red-500"
>
<IconCircleArrowUpFilled />
<CircleArrowUp />
</WithTooltip>
);
case "minor":
@@ -194,7 +186,7 @@ function Icon({ data }: { data: Image }) {
text="Minor Update"
className="ml-auto size-6 shrink-0 text-yellow-500"
>
<IconCircleArrowUpFilled />
<CircleArrowUp />
</WithTooltip>
);
case "patch":
@@ -203,7 +195,7 @@ function Icon({ data }: { data: Image }) {
text="Patch Update"
className="ml-auto size-6 shrink-0 text-blue-500"
>
<IconCircleArrowUpFilled />
<CircleArrowUp />
</WithTooltip>
);
}
@@ -213,7 +205,7 @@ function Icon({ data }: { data: Image }) {
text="Update available"
className="ml-auto size-6 shrink-0 text-blue-500"
>
<IconCircleArrowUpFilled />
<CircleArrowUp />
</WithTooltip>
);
}
@@ -225,14 +217,14 @@ function DialogIcon({ data }: { data: Image }) {
case null:
return (
<>
<IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
<HelpCircle className="size-6 shrink-0 text-gray-500" />
Unknown
</>
);
case false:
return (
<>
<IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
<CircleCheck className="size-6 shrink-0 text-green-500" />
Up to date
</>
);
@@ -242,21 +234,21 @@ function DialogIcon({ data }: { data: Image }) {
case "major":
return (
<>
<IconCircleArrowUpFilled className="size-6 shrink-0 text-red-500" />
<CircleArrowUp className="size-6 shrink-0 text-red-500" />
Major update
</>
);
case "minor":
return (
<>
<IconCircleArrowUpFilled className="size-6 shrink-0 text-yellow-500" />
<CircleArrowUp className="size-6 shrink-0 text-yellow-500" />
Minor update
</>
);
case "patch":
return (
<>
<IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
<CircleArrowUp className="size-6 shrink-0 text-blue-500" />
Patch update
</>
);
@@ -264,7 +256,7 @@ function DialogIcon({ data }: { data: Image }) {
} else if (data.result.info?.type === "digest") {
return (
<>
<IconCircleArrowUpFilled className="size-6 shrink-0 text-blue-500" />
<CircleArrowUp className="size-6 shrink-0 text-blue-500" />
Update available
</>
);

4
web/src/components/Loading.tsx
View File

@@ -1,7 +1,7 @@
import { IconLoader2 } from "@tabler/icons-react";
import { Data } from "../types";
import Logo from "./Logo";
import { theme } from "../theme";
import { RefreshCw } from "lucide-react";
export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
fetch(
@@ -28,7 +28,7 @@ export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
<div
className={`flex h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
>
Loading <IconLoader2 className="animate-spin" />
Loading <RefreshCw className="animate-spin" />
</div>
</div>
</div>

6
web/src/components/Search.tsx
View File

@@ -1,6 +1,6 @@
import { ChangeEvent, useState } from "react";
import { theme } from "../theme";
import { IconSearch, IconX } from "@tabler/icons-react";
import { SearchIcon, X } from "lucide-react";
export default function Search({
onChange,
@@ -27,7 +27,7 @@ export default function Search({
<div
className={`flex w-full items-center rounded-md border border-${theme}-300 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-200 dark:bg-${theme}-800 peer flex-nowrap`}
>
<IconSearch className="size-5" />
<SearchIcon className="size-5" />
<div className="w-full">
<input
className={`h-10 w-full text-sm text-${theme}-600 dark:text-${theme}-400 peer bg-transparent focus:outline-none placeholder:text-${theme}-500`}
@@ -41,7 +41,7 @@ export default function Search({
onClick={handleClear}
className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}
>
<IconX className="size-5" />
<X className="size-5" />
</button>
)}
</div>

4
web/src/components/Server.tsx
View File

@@ -4,7 +4,7 @@ import {
DisclosurePanel,
} from "@headlessui/react";
import { theme } from "../theme";
import { IconChevronDown } from "@tabler/icons-react";
import { ChevronDown } from "lucide-react";
export function Server({
name,
@@ -29,7 +29,7 @@ export function Server({
>
{name}
</span>
<IconChevronDown
<ChevronDown
className={`duration-300 size-5 text-${theme}-600 transition-transform group-data-[open]:rotate-180 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors`}
/>
</DisclosureButton>

15
web/src/components/Statistic.tsx
View File

@@ -1,9 +1,4 @@
import {
IconCircleArrowUpFilled,
IconCircleCheckFilled,
IconEyeFilled,
IconHelpCircleFilled,
} from "@tabler/icons-react";
import { CircleArrowUp, CircleCheck, Eye, HelpCircle } from "lucide-react";
import { theme } from "../theme";
import { Data } from "../types";
@@ -39,14 +34,14 @@ export default function Statistic({
{metrics[name]}
</dd>
{name === "monitored_images" && (
<IconEyeFilled className="size-6 shrink-0 text-black dark:text-white" />
<Eye className="size-6 shrink-0 text-black dark:text-white" />
)}
{name === "up_to_date" && (
<IconCircleCheckFilled className="size-6 shrink-0 text-green-500" />
<CircleCheck className="size-6 shrink-0 text-green-500" />
)}
{name === "updates_available" && getUpdatesAvailableIcon(metrics)}
{name === "unknown" && (
<IconHelpCircleFilled className="size-6 shrink-0 text-gray-500" />
<HelpCircle className="size-6 shrink-0 text-gray-500" />
)}
</div>
</div>
@@ -75,5 +70,5 @@ function getUpdatesAvailableIcon(metrics: Data["metrics"]) {
default:
color = "text-blue-500";
}
return <IconCircleArrowUpFilled className={`size-6 shrink-0 ${color}`} />;
return <CircleArrowUp className={`size-6 shrink-0 ${color}`} />;
}