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

change 'used by'

Browse Source
This commit is contained in:
Sergio
2025-05-29 15:18:45 +03:00
parent 6ec2d71009
commit cc785d9910
1 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@ import {
X, X,
} from "lucide-react"; } from "lucide-react";
import Badge from "./Badge"; import Badge from "./Badge";
import { cn, getDescription, truncateArray } from "../utils"; import { getDescription, truncateArray } from "../utils";
const clickable_registries = [ const clickable_registries = [
"registry-1.docker.io", "registry-1.docker.io",
@@ -32,16 +32,12 @@ const clickable_registries = [
export default function Image({ data }: { data: Image }) { export default function Image({ data }: { data: Image }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [showUsedBy, setShowUsedBy] = useState(false);
const handleOpen = () => { const handleOpen = () => {
setOpen(true); setOpen(true);
}; };
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
}; };
const toggleShowUsedBy = () => {
setShowUsedBy(!showUsedBy)
}
const new_reference = const new_reference =
data.result.info?.type == "version" data.result.info?.type == "version"
? data.reference.split(":")[0] + ":" + data.result.info.new_tag ? data.reference.split(":")[0] + ":" + data.result.info.new_tag
@@ -154,16 +150,16 @@ export default function Image({ data }: { data: Image }) {
{data.used_by.length !== 0 && ( {data.used_by.length !== 0 && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Container className="size-6 shrink-0 text-gray-500" /> <Container className="size-6 shrink-0 text-gray-500" />
<div className="flex items-start gap-1"> <Disclosure as="div">
<span className="shrink-0">Used by</span> <DisclosureButton className="inline-flex items-end group">Used by {truncateArray(data.used_by)}<ChevronDown className="shrink-0 size-5 group-data-[open]:rotate-180"/></DisclosureButton>
{data.used_by.length > 1 ? ( <DisclosurePanel className="origin-top transition duration-200 ease-out data-[closed]:-translate-y-6 data-[closed]:opacity-0 mt-4 rounded-lg bg-black/50 px-3 py-2" transition>
<button onClick={toggleShowUsedBy} className={cn("flex gap-x-2 flex-wrap font-bold", !showUsedBy && "underline")}> <table>
{showUsedBy ? data.used_by.map((container) => <><pre>{container}</pre></>) : truncateArray(data.used_by)} <tbody className="divide-y divide-white/10">
</button> {data.used_by.map((container) => <tr className="divide divide-white/10 divide-x group"><td className="px-2 py-1 group-first:pt-2 group-last:pb-2"><pre>{container}</pre></td><td className="px-2 py-1 group-first:pt-2 group-last:pb-2"><button className="inline-flex gap-1 items-center">Update<CircleArrowUp className="size-5"/></button></td></tr>)}
) : ( </tbody>
data.used_by[0] </table>
)} </DisclosurePanel>
</div> </Disclosure>
</div> </div>
)} )}
{data.result.error && ( {data.result.error && (