experimental: used badge

web/src/components/Badge.tsx

@@ -1,14 +1,13 @@
-import { ArrowRight } from "lucide-react";
 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 (
     <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}
-      <ArrowRight className="size-3" />
-      {to}
+      {children}
     </span>
   );
 }

web/src/components/Image.tsx

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