Merge pull request dubinc#2270 from dubinc/add-copy-btn

Add copy to clipboard on the links page

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/links/[...link]/page-client.tsx

@@ -26,11 +26,19 @@ import { TagSelect } from "@/ui/links/link-builder/tag-select";
 import { useLinkBuilderSubmit } from "@/ui/links/link-builder/use-link-builder-submit";
 import { useMetatags } from "@/ui/links/link-builder/use-metatags";
 import { LinkControls } from "@/ui/links/link-controls";
-import { useKeyboardShortcut, useMediaQuery } from "@dub/ui";
+import {
+  Button,
+  Check,
+  Copy,
+  useCopyToClipboard,
+  useKeyboardShortcut,
+  useMediaQuery,
+} from "@dub/ui";
 import { cn } from "@dub/utils";
 import { notFound, useParams, useRouter } from "next/navigation";
 import { memo, useEffect, useRef, useState } from "react";
 import { useFormContext, useFormState } from "react-hook-form";
+import { toast } from "sonner";
 
 export function LinkPageClient() {
   const params = useParams<{ link: string | string[] }>();
@@ -78,7 +86,8 @@ function LinkBuilder({ link }: { link: ExpandedLinkProps }) {
   const router = useRouter();
   const workspace = useWorkspace();
 
-  const { isDesktop } = useMediaQuery();
+  const { isDesktop, isMobile } = useMediaQuery();
+  const [copied, copyToClipboard] = useCopyToClipboard();
 
   const { control, handleSubmit, reset, getValues } =
     useFormContext<LinkFormData>();
@@ -152,6 +161,36 @@ function LinkBuilder({ link }: { link: ExpandedLinkProps }) {
               props={link}
               workspaceId={workspace.id!}
             />
+            <Button
+              icon={
+                <div className="relative size-4">
+                  <div
+                    className={cn(
+                      "absolute inset-0 transition-[transform,opacity]",
+                      copied && "translate-y-1 opacity-0",
+                    )}
+                  >
+                    <Copy className="size-4" />
+                  </div>
+                  <div
+                    className={cn(
+                      "absolute inset-0 transition-[transform,opacity]",
+                      !copied && "translate-y-1 opacity-0",
+                    )}
+                  >
+                    <Check className="size-4" />
+                  </div>
+                </div>
+              }
+              text="Copy link"
+              variant="secondary"
+              className="xs:w-fit h-7 px-2.5"
+              onClick={() => {
+                copyToClipboard(link.shortLink).then(() => {
+                  toast.success("Link copied to clipboard");
+                });
+              }}
+            />
             <div className="shrink-0">
               <LinkAnalyticsBadge link={link} />
             </div>

apps/web/ui/links/link-builder/draft-controls.tsx

@@ -148,7 +148,7 @@ export const DraftControls = forwardRef<
         type="button"
         variant="outline"
         className={cn(
-          "animate-fade-in group h-9 w-fit text-sm transition-colors data-[state=open]:bg-neutral-100",
+          "animate-fade-in group h-7 w-fit text-sm transition-colors data-[state=open]:bg-neutral-100",
           isDirty && hasSaved
             ? "pl-3 pr-4 text-neutral-400 hover:text-neutral-600"
             : "pl-4 pr-3 text-neutral-500 hover:text-neutral-700",