chore: reorganize client files for docker

client/src/components/Messages/Embed.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import Clipboard from '../svg/Clipboard';
+import CheckMark from '../svg/CheckMark';
+
+export default function Embed({ children, language = '', code, matched }) {
+  const [buttonText, setButtonText] = useState('Copy code');
+  const isClicked = buttonText === 'Copy code';
+
+  const clickHandler = () => {
+    navigator.clipboard.writeText(code.trim());
+    setButtonText('Copied!');
+    setTimeout(() => {
+      setButtonText('Copy code');
+    }, 3000);
+  };
+
+  return (
+    <pre>
+      <div className="mb-4 rounded-md bg-black">
+        <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200">
+          <span className="">{language === 'javascript' && !matched ? '' : language}</span>
+          <button
+            className="ml-auto flex gap-2"
+            onClick={clickHandler}
+            disabled={!isClicked}
+          >
+            {isClicked ? <Clipboard /> : <CheckMark />}
+            {buttonText}
+          </button>
+        </div>
+        <div className="overflow-y-auto p-4">{children}</div>
+      </div>
+    </pre>
+  );
+}