feat: add LoadedCode for externally load code

packages/react/src/components/LoadedCode.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import hljs from "highlight.js";
+import { Button } from "@components/Button";
+import { useToast } from "@components/Toast";
+
+export function LoadedCode({ from }: { from: string }) {
+  const [state, setState] = useState<string | undefined | null>();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(from);
+      const text = await res.text();
+      setState(text);
+    })();
+  }, [from]);
+
+  useEffect(() => {
+    if (state) {
+      hljs.highlightAll();
+    }
+  }, [state]);
+
+  return (
+    <pre
+      className={`relative hljs w-full h-auto max-h-64 rounded-lg ${
+        !state ? "animate-pulse" : ""
+      }`}
+    >
+      <Button
+        preset="default"
+        size="icon"
+        className="absolute top-4 right-4 text-black dark:text-white"
+        onClick={() => {
+          navigator.clipboard.writeText(state ?? "");
+          toast({
+            title: "Copied",
+            description: "The code has been copied to your clipboard.",
+            status: "success",
+          });
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.2em"
+          height="1.2em"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
+          />
+        </svg>
+      </Button>
+      <code className="language-tsx">{state ?? null}</code>
+    </pre>
+  );
+}