Skip to content

Commit

Permalink
remove default value
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelUnkey committed Dec 4, 2024
1 parent f2507b3 commit 5fc42a0
Showing 1 changed file with 61 additions and 61 deletions.
122 changes: 61 additions & 61 deletions internal/ui/src/components/id.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,72 +5,72 @@ import { cn } from "../lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";

type IdProps = {
/**
* Value displayed on the component.
*/
value: string;
/**
* Number to truncate the value to. If the value is longer than the truncate number, it will be truncated and an ellipse will be added to the end.
*/
truncate?: number;
/**
* Any additional classes to apply to the component.
*/
className?: string;
/**
* Value displayed on the component.
*/
value: string;
/**
* Number to truncate the value to. If the value is longer than the truncate number, it will be truncated and an ellipse will be added to the end.
*/
truncate?: number;
/**
* Any additional classes to apply to the component.
*/
className?: string;
};

export const Id: React.FC<IdProps> = ({ className, value, truncate, ...props }) => {
const [isCopied, setIsCopied] = React.useState(false);
const copyTextToClipboard = async (value: string) => {
try {
await navigator.clipboard.writeText(value ?? "");
setIsCopied(true);
} catch (error) {
console.error("Failed to copy: ", error);
}
};
const [isCopied, setIsCopied] = React.useState(false);
const copyTextToClipboard = async (value: string) => {
try {
await navigator.clipboard.writeText(value);
setIsCopied(true);
} catch (error) {
console.error("Failed to copy: ", error);
}
};

React.useEffect(() => {
if (!isCopied) {
return;
}
const timer = setTimeout(() => {
setIsCopied(false);
}, 2000);
return () => clearTimeout(timer);
}, [isCopied]);
React.useEffect(() => {
if (!isCopied) {
return;
}
const timer = setTimeout(() => {
setIsCopied(false);
}, 2000);
return () => clearTimeout(timer);
}, [isCopied]);

const ellipse = "••••";
const truncateValue = truncate ? value?.slice(0, truncate) + ellipse : value;
const ellipse = "••••";
const truncateValue = truncate ? value?.slice(0, truncate) + ellipse : value;

return (
<button
type="button"
className={cn(
"relative inline-flex w-full ring-2 ring-transparent no-underline focus:ring-gray-6 group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium bg-gray-1 w-fit max-w-96 border border-accent-6 hover:border-accent-8 text-gray-12 radius radius-2 font-mono h-8 px-3 py-1 text-xs overflow-hidden",
className,
)}
onClick={() => copyTextToClipboard(value)}
aria-label={`Copy ID: ${value}`}
role="button"
{...props}
>
{truncateValue}
<Tooltip>
<div className="absolute flex h-8 w-8 top-0 right-0 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity">
<TooltipTrigger asChild>
<div className=" flex justify-end border w-full border-none h-full bg-accent-1">
{!isCopied ? (
<TaskUnchecked className="size-[12px] item-end my-auto mr-2 bg-gray-1" />
) : (
<TaskChecked className="size-[12px] item-end my-auto mr-2 bg-gray-1" />
)}
</div>
</TooltipTrigger>
<TooltipContent side="bottom">Copy ID</TooltipContent>
</div>
</Tooltip>
</button>
);
return (
<button
type="button"
className={cn(
"relative inline-flex w-full ring-2 ring-transparent no-underline focus:ring-gray-6 group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium bg-gray-1 w-fit max-w-96 border border-accent-6 hover:border-accent-8 text-gray-12 radius radius-2 font-mono h-8 px-3 py-1 text-xs overflow-hidden",
className,
)}
onClick={() => copyTextToClipboard(value)}
aria-label={`Copy ID: ${value}`}
role="button"
{...props}
>
{truncateValue}
<Tooltip>
<div className="absolute flex h-8 w-8 top-0 right-0 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity">
<TooltipTrigger asChild>
<div className=" flex justify-end border w-full border-none h-full bg-accent-1">
{!isCopied ? (
<TaskUnchecked className="size-[12px] item-end my-auto mr-2 bg-gray-1" />
) : (
<TaskChecked className="size-[12px] item-end my-auto mr-2 bg-gray-1" />
)}
</div>
</TooltipTrigger>
<TooltipContent side="bottom">Copy ID</TooltipContent>
</div>
</Tooltip>
</button>
);
};
Id.displayName = "Id";

0 comments on commit 5fc42a0

Please sign in to comment.