awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-03 13:26:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add copy project slug button

Browse Source
This commit is contained in:
Daniel Hougaard
2024-03-07 02:20:01 +01:00
parent f078aec54c
commit dbf177d667
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
+4 -3
View File
@@ -9,10 +9,11 @@ import { useToggle } from "@app/hooks";
type Props = { type Props = {
value: string; value: string;
hoverText: string; hoverText: string;
notificationText: string;
children: React.ReactNode; children: React.ReactNode;
}; };
export const CopyButton = ({ value, children, hoverText }: Props) => { export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false); const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
const { createNotification } = useNotificationContext(); const { createNotification } = useNotificationContext();
@@ -25,7 +26,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
createNotification({ createNotification({
text: "Copied Project ID to clipboard", text: notificationText,
type: "success" type: "success"
}); });
@@ -43,7 +44,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{children} {children}
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn"> <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 py-2 px-3 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
{hoverText} {hoverText}
</span> </span>
</Button> </Button>