mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-11 16:07:15 +02:00
8b198f1a26
- Add IconCopyButton component for reusable icon-only copy buttons - Refactor RepositoryFilesSection to use IconCopyButton - Replace Check with CopyCheck in ChatMessageContextMenu - Replace Check with CopyCheck in BaseEventRenderer - Use text-success instead of text-green-500 for consistency
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import { Copy, CopyCheck } from "lucide-react";
|
|
import { useCopy } from "@/hooks/useCopy";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type IconSize = "xs" | "sm" | "md" | "lg";
|
|
|
|
interface IconCopyButtonProps {
|
|
/** Text to copy to clipboard */
|
|
text: string;
|
|
/** Icon size preset */
|
|
size?: IconSize;
|
|
/** Additional class names for the button */
|
|
className?: string;
|
|
/** Tooltip/aria-label text */
|
|
label?: string;
|
|
}
|
|
|
|
const sizeClasses: Record<IconSize, string> = {
|
|
xs: "size-3",
|
|
sm: "size-3.5",
|
|
md: "size-4",
|
|
lg: "size-5 md:size-4",
|
|
};
|
|
|
|
/**
|
|
* Tiny icon-only copy button for inline use
|
|
* Uses Copy/CopyCheck icons with consistent styling
|
|
*/
|
|
export function IconCopyButton({
|
|
text,
|
|
size = "sm",
|
|
className,
|
|
label = "Copy",
|
|
}: IconCopyButtonProps) {
|
|
const { copy, copied } = useCopy();
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => copy(text)}
|
|
className={cn(
|
|
"flex-shrink-0 p-1 rounded hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors",
|
|
className,
|
|
)}
|
|
title={label}
|
|
aria-label={label}
|
|
>
|
|
{copied ? (
|
|
<CopyCheck className={cn(sizeClasses[size], "text-success")} />
|
|
) : (
|
|
<Copy className={sizeClasses[size]} />
|
|
)}
|
|
</button>
|
|
);
|
|
}
|