From e62deaf17cfba1cffebbf96d3d6ad2a3880af388 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Fri, 11 Mar 2022 13:37:05 +0000
Subject: [PATCH] Added a copy text button to a json preview

---
 app/components/CopyText.tsx                  |  2 +-
 app/components/JsonPreview.tsx               | 23 ++++++++++++++++++--
 app/components/Preview/PreviewBox.tsx        |  2 +-
 app/components/Preview/Types/PreviewJson.tsx |  6 ++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/components/CopyText.tsx b/app/components/CopyText.tsx
index b73ba9b..4a8cc80 100644
--- a/app/components/CopyText.tsx
+++ b/app/components/CopyText.tsx
@@ -21,7 +21,7 @@ export function CopyText({
   }, [value]);
 
   return (
-    <div onClick={onClick} className={`${className} relative`}>
+    <div onClick={onClick} className={`${className}`}>
       {children}
     </div>
   );
diff --git a/app/components/JsonPreview.tsx b/app/components/JsonPreview.tsx
index fe74fdb..e7ab427 100644
--- a/app/components/JsonPreview.tsx
+++ b/app/components/JsonPreview.tsx
@@ -10,9 +10,12 @@ import {
   TransactionSpec,
 } from "@uiw/react-codemirror";
 import jsonMap from "json-source-map";
-import { useRef, useEffect, useMemo } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { getPreviewSetup } from "~/utilities/codeMirrorSetup";
 import { lightTheme, darkTheme } from "~/utilities/codeMirrorTheme";
+import { CopyTextButton } from "./CopyTextButton";
+import { OpenInNewWindow } from "./OpenInWindow";
+import { Body } from "./Primitives/Body";
 import { useTheme } from "./ThemeProvider";
 
 export type JsonPreviewProps = {
@@ -89,9 +92,25 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) {
     view.dispatch(transactionSpec);
   }, [view, highlighting, jsonMapped, highlightPath]);
 
+  const [hovering, setHovering] = useState(false);
+
   return (
-    <div>
+    <div
+      className="relative w-full h-full"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
       <div ref={editor} />
+      <div
+        className={`absolute top-1 right-0 flex justify-end w-full transition ${
+          hovering ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <CopyTextButton
+          value={jsonMapped.json}
+          className="bg-slate-200 hover:bg-slate-300 h-fit mr-1 px-2 py-0.5 rounded-sm transition hover:cursor-pointer dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
+        ></CopyTextButton>
+      </div>
     </div>
   );
 }
diff --git a/app/components/Preview/PreviewBox.tsx b/app/components/Preview/PreviewBox.tsx
index 6991d51..f8dd02e 100644
--- a/app/components/Preview/PreviewBox.tsx
+++ b/app/components/Preview/PreviewBox.tsx
@@ -13,7 +13,7 @@ export function PreviewBox({ link, className, children }: PreviewBoxProps) {
         Preview
       </Title>
       <a
-        className="block rounded-sm p-2 text-slate-700 bg-slate-100 transition dark:text-slate-300 dark:bg-white dark:bg-opacity-5 hover:bg-slate-200 hover:cursor-pointer"
+        className="block rounded-sm p-2 text-slate-700 bg-slate-100 transition dark:text-slate-300 dark:bg-white dark:bg-opacity-5 hover:cursor-pointer"
         href={link}
         target="_blank"
       >
diff --git a/app/components/Preview/Types/PreviewJson.tsx b/app/components/Preview/Types/PreviewJson.tsx
index 5647531..bdf5ff9 100644
--- a/app/components/Preview/Types/PreviewJson.tsx
+++ b/app/components/Preview/Types/PreviewJson.tsx
@@ -20,7 +20,7 @@ export function PreviewJson({ preview }: { preview: PreviewJson }) {
   return (
     <PreviewBox className="relative">
       <div
-        className="w-full h-full"
+        className="relative w-full h-full"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >
@@ -32,11 +32,11 @@ export function PreviewJson({ preview }: { preview: PreviewJson }) {
         >
           <CopyTextButton
             value={code}
-            className="bg-slate-700 h-fit mr-1 px-2 rounded-sm transition hover:bg-slate-600"
+            className="bg-slate-200 hover:bg-slate-300 h-fit mr-1 px-2 py-0.5 rounded-sm transition dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
           ></CopyTextButton>
           <OpenInNewWindow
             url={jsonHeroUrl.href}
-            className="bg-slate-700 h-fit px-2 rounded-sm transition hover:bg-slate-600"
+            className="bg-slate-200 hover:bg-slate-300 h-fit px-2 py-0.5 rounded-sm transition dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
           >
             <Body>Open in tab</Body>
           </OpenInNewWindow>