From f72fa7e5d1a550deaea89f619cf81dd6ec55cc7d Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Tue, 18 Feb 2025 11:08:04 +0100
Subject: [PATCH] update

---
 web/app/docs/installation/page.tsx | 27 ++++++++++++++-------------
 web/components/CopyableCode.tsx    | 29 ++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/web/app/docs/installation/page.tsx b/web/app/docs/installation/page.tsx
index e245d04..f4c2778 100644
--- a/web/app/docs/installation/page.tsx
+++ b/web/app/docs/installation/page.tsx
@@ -6,23 +6,24 @@ export default function InstallationPage() {
   const installationCode = `bash -c "$(wget -qLO - https://raw.githubusercontent.com/MacRimi/ProxMenux/main/install_proxmenux.sh)"`
 
   return (
-    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
-      <h1 className="text-3xl sm:text-4xl font-bold mb-6">Installing ProxMenux</h1>
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
+      <h1 className="text-3xl font-bold mb-6">Installing ProxMenux</h1>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-4">Installation</h2>
-      <p className="mb-4">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p>
-      <CopyableCode code={installationCode} />
+      <h2 className="text-xl font-semibold mt-6 mb-2">Installation</h2>
+      <p className="mb-2">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p>
+      <div className="w-full overflow-hidden mb-4">
+        <CopyableCode code={installationCode} className="w-full" />
+      </div>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-4">How to Use</h2>
-      <p className="mb-4">
+      <h2 className="text-xl font-semibold mt-6 mb-2">How to Use</h2>
+      <p className="mb-2">
         Once installed, launch <strong>ProxMenux</strong> by running:
       </p>
-      <CopyableCode code="menu" />
-        <br />
-        <br />
-        <br />
-        <br />
-      <h2 className="text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
+      <div className="w-full overflow-hidden mb-4">
+        <CopyableCode code="menu" className="w-full" />
+      </div>
+
+      <h2 className="text-xl font-semibold mt-8 mb-4">Troubleshooting</h2>
       <p className="mb-4">
         If you encounter any issues during installation or usage, please check the{" "}
         <a href="https://github.com/MacRimi/ProxMenux/issues" className="text-blue-600 hover:underline">
diff --git a/web/components/CopyableCode.tsx b/web/components/CopyableCode.tsx
index 9a931e5..74f940d 100644
--- a/web/components/CopyableCode.tsx
+++ b/web/components/CopyableCode.tsx
@@ -1,19 +1,24 @@
+
+
 "use client"
 
 import type React from "react"
 import { useState } from "react"
 import { Copy, Check } from "lucide-react"
+import { cn } from "@/lib/utils"
 
 interface CopyableCodeProps {
   code: string
+  language?: string
+  className?: string
 }
 
-const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
+const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(code)
+      await navigator.clipboard.writeText(decodeURIComponent(code))
       setIsCopied(true)
       setTimeout(() => setIsCopied(false), 2000)
     } catch (err) {
@@ -22,16 +27,23 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
   }
 
   return (
-    <div className="relative my-4">
-      <pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
-        <code className="text-sm">{code}</code>
+    <div className={cn("relative w-full", className)}>
+      <pre
+        className={cn(
+          "bg-gray-100 p-2 rounded-md overflow-x-auto",
+          "text-base",
+          "w-full",
+          language ? `language-${language}` : "",
+        )}
+      >
+        <code className="whitespace-pre">{decodeURIComponent(code)}</code>
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
-        aria-label="Copy to clipboard"
+        className="absolute top-2 right-2 p-1 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
+        aria-label="Copy code"
       >
-        {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
+        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4 text-gray-500" />}
       </button>
     </div>
   )
@@ -40,4 +52,3 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
 export default CopyableCode
 
 
-