Added a copy and open in new window button to json preview

2022-03-04 17:21:08 +00:00
parent 669c45a115
commit 4b15b84ddf
3 changed files with 65 additions and 15 deletions
@@ -4,11 +4,20 @@ export type CopyTextProps = {
  children?: React.ReactNode;
  value: string;
  className?: string;
+  onCopied?: () => void;
 };

-export function CopyText({ children, value, className }: CopyTextProps) {
+export function CopyText({
+  children,
+  value,
+  className,
+  onCopied,
+}: CopyTextProps) {
  const onClick = useCallback(() => {
    navigator.clipboard.writeText(value);
+    if (onCopied) {
+      onCopied();
+    }
  }, [value]);

  return (
@@ -0,0 +1,31 @@
+import { ClipboardIcon } from "@heroicons/react/outline";
+import { useCallback, useState } from "react";
+import { CopyText } from "./CopyText";
+import { Body } from "./Primitives/Body";
+
+export type CopyTextButtonProps = {
+  value: string;
+  className?: string;
+};
+
+export function CopyTextButton({ value, className }: CopyTextButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const onCopied = useCallback(() => {
+    setCopied(true);
+    const timeout = setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  }, [value]);
+  return (
+    <CopyText className={`${className}`} value={value} onCopied={onCopied}>
+      {copied ? (
+        <Body>Copied!</Body>
+      ) : (
+        <div className="flex items-center">
+          <ClipboardIcon className="h-4 w-4 mr-[2px]" />
+          <Body>Copy</Body>
+        </div>
+      )}
+    </CopyText>
+  );
+}
@@ -1,11 +1,13 @@
+import { useState } from "react";
 import { CodeViewer } from "~/components/CodeViewer";
-import { CopyText } from "~/components/CopyText";
+import { CopyTextButton } from "~/components/CopyTextButton";
 import { OpenInNewWindow } from "~/components/OpenInWindow";
 import { Body } from "~/components/Primitives/Body";
 import { PreviewBox } from "../PreviewBox";
 import { PreviewJson } from "./preview.types";

 export function PreviewJson({ preview }: { preview: PreviewJson }) {
+  const [hovering, setHovering] = useState(false);
  const jsonHeroUrl = new URL(
    `/actions/createFromUrl?jsonUrl=${encodeURIComponent(preview.url)}`,
    window.location.origin
@@ -17,21 +19,29 @@ export function PreviewJson({ preview }: { preview: PreviewJson }) {

  return (
    <PreviewBox className="relative">
-      <div className="absolute flex justify-end pt-1 pr-1 z-10 h-full w-full opacity-0 hover:opacity-100 transition">
-        <CopyText
-          value={code}
-          className="bg-slate-700 h-fit mr-1 px-2 rounded-sm"
+      <div
+        className="w-full h-full"
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <CodeViewer code={code} />
+        <div
+          className={`absolute top-0 flex justify-end pt-1 pr-1 w-full transition ${
+            hovering ? "opacity-100" : "opacity-0"
+          }`}
        >
-          <Body>Copy</Body>
-        </CopyText>
-        <OpenInNewWindow
-          url={jsonHeroUrl.href}
-          className="bg-slate-700 h-fit px-2 rounded-sm"
-        >
-          <Body>Open in tab</Body>
-        </OpenInNewWindow>
+          <CopyTextButton
+            value={code}
+            className="bg-slate-700 h-fit mr-1 px-2 rounded-sm transition hover:bg-slate-600"
+          ></CopyTextButton>
+          <OpenInNewWindow
+            url={jsonHeroUrl.href}
+            className="bg-slate-700 h-fit px-2 rounded-sm transition hover:bg-slate-600"
+          >
+            <Body>Open in tab</Body>
+          </OpenInNewWindow>
+        </div>
      </div>
-      <CodeViewer code={code} />
    </PreviewBox>
  );
 }