Added a copy text button to the schema view

app/components/JsonPreview.tsx

@@ -14,8 +14,6 @@ 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 = {

app/components/JsonSchemaViewer.tsx

@@ -1,13 +1,35 @@
 import { JSONHeroPath } from "@jsonhero/path";
+import { useState } from "react";
 import { useJsonSchema } from "~/hooks/useJsonSchema";
 import { CodeViewer } from "./CodeViewer";
+import { CopyTextButton } from "./CopyTextButton";
 
 export function JsonSchemaViewer({ path }: { path: string }) {
   const schema = useJsonSchema();
   const schemaPath = schemaPathFromPath(path);
   const schemaJson = schemaPath.first(schema);
+  const [hovering, setHovering] = useState(false);
+  const code = JSON.stringify(schemaJson, null, 2);
 
-  return <CodeViewer code={JSON.stringify(schemaJson, null, 2)} lang="json" />;
+  return (
+    <div
+      className="relative w-full h-full"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <CodeViewer code={code} lang="json" />
+      <div
+        className={`absolute top-1 right-0 flex justify-end w-full transition ${
+          hovering ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <CopyTextButton
+          value={code}
+          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>
+  );
 }
 
 function schemaPathFromPath(path: JSONHeroPath | string): JSONHeroPath {