Update endpoint view to allow directly opening the endpoint and copying the URL with one click

Author: bergerjohannes

package-lock.json

@@ -13,6 +13,8 @@
     "build-cf-types": "wrangler types --env-interface CloudflareEnv env.d.ts"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "bright": "^0.8.5",
     "next": "14.1.0",
     "react": "^18",

package.json

@@ -1,24 +1,35 @@
+"use client";
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExternalLinkAlt, faCopy } from "@fortawesome/free-solid-svg-icons";
 
 interface EndpointViewProps {
   endpoint: string;
   method: string;
 }
 
 const EndpointView: React.FC<EndpointViewProps> = ({ endpoint, method }) => {
+  const fullUrl = `https://pokedex.mimo.dev/api/${endpoint}`;
+
   const handleOpenEndpoint = () => {
-    window.open(endpoint, "_blank");
+    window.open(fullUrl, "_blank");
   };
 
   const handleCopyEndpoint = () => {
-    navigator.clipboard.writeText(endpoint);
+    navigator.clipboard.writeText(fullUrl);
   };
 
   return (
     <div className="bg-pokemon-gray text-white p-2 h-12 w-fit rounded flex items-center">
       <span>{method}</span>
       <span className="w-2"></span>
-      <span className="underline decoration-pokemon-yellow">{endpoint}</span>
+      <span className="underline decoration-pokemon-yellow">{fullUrl}</span>
+      <button onClick={handleOpenEndpoint} className="ml-2">
+        <FontAwesomeIcon icon={faExternalLinkAlt} />
+      </button>
+      <button onClick={handleCopyEndpoint} className="ml-2">
+        <FontAwesomeIcon icon={faCopy} />
+      </button>
     </div>
   );
 };