This commit is contained in:
MacRimi 2025-02-17 23:46:56 +01:00
parent d9d66e1301
commit 7ef691fdc2
2 changed files with 31 additions and 14 deletions

View File

@ -7,20 +7,26 @@ export default function InstallationPage() {
return ( return (
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900"> <div className="max-w-4xl 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> <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-6">Installing ProxMenux</h1>
<h2 className="text-2xl font-semibold mt-8 mb-4">Installation</h2> <h2 className="text-xl sm: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> <p className="mb-4 text-sm sm:text-base">
<CopyableCode code={installationCode} className="w-full overflow-x-auto" /> To install ProxMenux, simply run the following command in your Proxmox server terminal:
</p>
<div className="w-full overflow-hidden mb-8">
<CopyableCode code={installationCode} className="w-full" />
</div>
<h2 className="text-2xl font-semibold mt-8 mb-4">How to Use</h2> <h2 className="text-xl sm:text-2xl font-semibold mt-8 mb-4">How to Use</h2>
<p className="mb-4"> <p className="mb-4 text-sm sm:text-base">
Once installed, launch <strong>ProxMenux</strong> by running: Once installed, launch <strong>ProxMenux</strong> by running:
</p> </p>
<CopyableCode code="menu" className="w-full overflow-x-auto" /> <div className="w-full overflow-hidden mb-8">
<CopyableCode code="menu" className="w-full" />
</div>
<h2 className="text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2> <h2 className="text-xl sm:text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
<p className="mb-4"> <p className="mb-4 text-sm sm:text-base">
If you encounter any issues during installation or usage, please check the{" "} 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"> <a href="https://github.com/MacRimi/ProxMenux/issues" className="text-blue-600 hover:underline">
GitHub Issues GitHub Issues

View File

@ -25,16 +25,27 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
} }
return ( return (
<div className={cn("relative", className)}> <div className={cn("relative w-full", className)}>
<pre className={`bg-gray-100 p-4 rounded-md overflow-x-auto ${language ? `language-${language}` : ""}`}> <pre
<code dangerouslySetInnerHTML={{ __html: decodeURIComponent(code) }} /> className={cn(
"bg-gray-100 p-2 sm:p-3 md:p-4 rounded-md overflow-x-auto",
"text-xs sm:text-sm md:text-base lg:text-lg",
"max-w-full",
language ? `language-${language}` : "",
)}
>
<code className="break-words whitespace-pre-wrap">{decodeURIComponent(code)}</code>
</pre> </pre>
<button <button
onClick={copyToClipboard} onClick={copyToClipboard}
className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors" className="absolute top-1 right-1 sm:top-2 sm:right-2 p-1 sm:p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
aria-label="Copy code" aria-label="Copy code"
> >
{isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4 text-gray-500" />} {isCopied ? (
<Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
) : (
<Copy className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
)}
</button> </button>
</div> </div>
) )