khairul169/garage-webui
1
0
Fork 0
mirror of https://github.com/khairul169/garage-webui.git synced 2025-04-28 06:49:32 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add copy button to code component

Browse Source
This commit is contained in:
Khairul Hidayat 2024-08-17 01:00:17 +07:00
parent fb02d273c2
commit 61a07068d5
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ui/code.tsx
View File

@ -1,17 +1,29 @@
import { cn } from "@/lib/utils"; import { cn, copyToClipboard } from "@/lib/utils";
import React from "react"; import React from "react";
import Button from "./button";
import { Copy } from "lucide-react";
type Props = React.ComponentPropsWithoutRef<"code">; type Props = Omit<React.ComponentPropsWithoutRef<"code">, "children"> & {
children?: string;
};
const Code = ({ className, ...props }: Props) => { const Code = ({ className, children, ...props }: Props) => {
return ( return (
<code <code
className={cn( className={cn(
"border border-base-content/20 px-4 py-3 rounded-lg font-mono block", "border border-base-content/20 px-4 py-3 rounded-lg font-mono block relative",
className className
)} )}
{...props} {...props}
/> >
{children}
<Button
icon={Copy}
className="absolute right-0 top-0"
color="ghost"
onClick={() => copyToClipboard(children || "")}
/>
</code>
); );
}; };

2
src/pages/cluster/components/connect-node-dialog.tsx
View File

@ -59,7 +59,7 @@ const ConnectNodeDialog = () => {
> >
<Modal.Header>Connect Node</Modal.Header> <Modal.Header>Connect Node</Modal.Header>
<Modal.Body> <Modal.Body>
<p>Run this command to get node id:</p> <p>Run this command in your target node to get node id:</p>
<Code className="mt-2">docker exec garage /garage node id</Code> <Code className="mt-2">docker exec garage /garage node id</Code>
<p className="mt-8">Enter node id:</p> <p className="mt-8">Enter node id:</p>