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

Add copy pull command button to image info

Browse Source
This commit is contained in:
Sergio
2024-10-25 16:59:42 +03:00
parent bcfb9ef27a
commit 6d45409928
1 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,10 @@ import {
import {
IconAlertTriangleFilled,
IconArrowUpRight,
IconCheck,
IconCircleArrowUpFilled,
IconCircleCheckFilled,
IconCopy,
IconCube,
IconHelpCircleFilled,
IconStopwatch,
@@ -28,12 +30,23 @@ const clickable_registries = [
export default function Image({ data }: { data: Image }) {
const [open, setOpen] = useState(false);
const [copySuccess, setCopySuccess] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleCopy = (text: string) => {
return () => {
navigator.clipboard.writeText(text).then(() => {
setCopySuccess(true);
setTimeout(() => {
setCopySuccess(false);
}, 3000);
});
};
};
var url: string | null = null;
if (clickable_registries.includes(data.parts.registry)) {
switch (data.parts.registry) {
@@ -142,11 +155,36 @@ export default function Image({ data }: { data: Image }) {
Checked in {data.time} ms
</div>
{data.result.error && (
<div className="bg-yellow-400/10 flex items-center gap-3 overflow-hidden break-all rounded-md px-3 py-2">
<div className="bg-yellow-400/10 flex items-center gap-3 overflow-hidden break-all rounded-md px-3 py-2 mb-4">
<IconAlertTriangleFilled className="text-yellow-500 size-5 shrink-0" />
{data.result.error}
</div>
)}
{data.result.has_update && (
<div className="flex flex-col gap-1">
Pull command
<div
className={`bg-${theme}-50 dark:bg-${theme}-950 text-gray-500 flex items-center rounded-md px-3 py-2 font-mono mb-4 group relative`}
>
<p className="overflow-scroll">
docker pull {data.reference}
</p>
{navigator.clipboard &&
(copySuccess ? (
<IconCheck className="absolute right-3" />
) : (
<button
className="absolute right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-50"
onClick={handleCopy(
`docker pull ${data.reference}`
)}
>
<IconCopy />
</button>
))}
</div>
</div>
)}
<div className="flex flex-col gap-1">
Local digests
<div