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

experimental: used badge

Browse Source
This commit is contained in:
Sergio
2025-05-21 21:34:30 +03:00
parent 4fe070a5a0
commit c70bd55de8
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/Badge.tsx
View File

@@ -1,14 +1,13 @@
import { ArrowRight } from "lucide-react";
import { theme } from "../theme"; import { theme } from "../theme";
import { ReactNode } from "react";
import { cn } from "../utils";
export default function Badge({ from, to }: { from: string; to: string }) { export default function Badge({ children, className }: { children: ReactNode, className?: string }) {
return ( return (
<span <span
className={`inline-flex items-center rounded-full bg-${theme}-50 px-2 py-1 text-xs font-medium text-${theme}-700 ring-1 ring-inset ring-${theme}-700/10 dark:bg-${theme}-400/10 dark:text-${theme}-400 dark:ring-${theme}-400/30 break-keep`} className={cn(`inline-flex items-center rounded-full bg-${theme}-50 px-2 py-1 text-xs font-medium text-${theme}-700 ring-1 ring-inset ring-${theme}-700/10 dark:bg-${theme}-400/10 dark:text-${theme}-400 dark:ring-${theme}-400/30 break-keep`, className)}
> >
{from} {children}
<ArrowRight className="size-3" />
{to}
</span> </span>
); );
} }

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

@@ -4,17 +4,14 @@ import {
DialogBackdrop, DialogBackdrop,
DialogPanel, DialogPanel,
DialogTitle, DialogTitle,
Disclosure,
DisclosureButton,
DisclosurePanel,
} from "@headlessui/react"; } from "@headlessui/react";
import { WithTooltip } from "./ui/Tooltip"; import { WithTooltip } from "./ui/Tooltip";
import type { Image } from "../types"; import type { Image } from "../types";
import { theme } from "../theme"; import { theme } from "../theme";
import { CodeBlock } from "./CodeBlock"; import { CodeBlock } from "./CodeBlock";
import { import {
ArrowRight,
Box, Box,
ChevronDown,
CircleArrowUp, CircleArrowUp,
CircleCheck, CircleCheck,
Container, Container,
@@ -73,11 +70,16 @@ export default function Image({ data }: { data: Image }) {
<span className="font-mono">{data.reference}</span> <span className="font-mono">{data.reference}</span>
<div className="ml-auto flex gap-2"> <div className="ml-auto flex gap-2">
{data.result.info?.type === "version" ? ( {data.result.info?.type === "version" ? (
<Badge <Badge className="hidden sm:inline-flex">
from={data.result.info.current_version} {data.result.info.current_version}
to={data.result.info.new_version} <ArrowRight className="size-3" />
/> {data.result.info.new_version}
</Badge>
) : null} ) : null}
<Badge className="hidden md:inline-flex">
<Container className="size-4 mr-1"/>
{data.used_by.length}
</Badge>
<WithTooltip <WithTooltip
text={info.description} text={info.description}
className={`size-6 shrink-0 ${info.color}`} className={`size-6 shrink-0 ${info.color}`}