diff options
Diffstat (limited to 'apps/web/components/ui')
| -rw-r--r-- | apps/web/components/ui/copy-button.tsx | 41 | ||||
| -rw-r--r-- | apps/web/components/ui/input.tsx | 16 |
2 files changed, 46 insertions, 11 deletions
diff --git a/apps/web/components/ui/copy-button.tsx b/apps/web/components/ui/copy-button.tsx index a51ce902..1cb405da 100644 --- a/apps/web/components/ui/copy-button.tsx +++ b/apps/web/components/ui/copy-button.tsx @@ -1,6 +1,10 @@ -import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
import { Check, Copy } from "lucide-react";
+import { Button } from "./button";
+import { toast } from "./use-toast";
+
export default function CopyBtn({
className,
getStringToCopy,
@@ -35,3 +39,38 @@ export default function CopyBtn({ </button>
);
}
+
+export function CopyBtnV2({
+ className,
+ getStringToCopy,
+}: {
+ className?: string;
+ getStringToCopy: () => string;
+}) {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = async (url: string) => {
+ try {
+ await navigator.clipboard.writeText(url);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ toast({
+ description:
+ "Failed to copy link. Browsers only support copying to the clipboard from https pages.",
+ variant: "destructive",
+ });
+ }
+ };
+
+ return (
+ <Button
+ size="sm"
+ variant="outline"
+ onClick={() => handleCopy(getStringToCopy())}
+ className={cn("shrink-0", className)}
+ >
+ {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+ </Button>
+ );
+}
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx index 09f9def9..66cd1108 100644 --- a/apps/web/components/ui/input.tsx +++ b/apps/web/components/ui/input.tsx @@ -1,23 +1,19 @@ import * as React from "react"; import { cn } from "@/lib/utils"; -import { LucideIcon } from "lucide-react"; export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { - startIcon?: LucideIcon; - endIcon?: LucideIcon; + startIcon?: React.ReactNode; + endIcon?: React.ReactNode; } const Input = React.forwardRef<HTMLInputElement, InputProps>( ({ className, type, startIcon, endIcon, ...props }, ref) => { - const StartIcon = startIcon; - const EndIcon = endIcon; - return ( <div className="relative w-full"> - {StartIcon && ( + {startIcon && ( <div className="absolute left-2 top-1/2 -translate-y-1/2 transform"> - <StartIcon size={18} className="text-muted-foreground" /> + {startIcon} </div> )} <input @@ -31,9 +27,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>( ref={ref} {...props} /> - {EndIcon && ( + {endIcon && ( <div className="absolute right-3 top-1/2 -translate-y-1/2 transform"> - <EndIcon className="text-muted-foreground" size={18} /> + {endIcon} </div> )} </div> |