This commit is contained in:
MacRimi 2025-02-18 11:08:04 +01:00
parent 0f4f4195bd
commit f72fa7e5d1
2 changed files with 34 additions and 22 deletions

View File

@ -6,23 +6,24 @@ export default function InstallationPage() {
const installationCode = `bash -c "$(wget -qLO - https://raw.githubusercontent.com/MacRimi/ProxMenux/main/install_proxmenux.sh)"` const installationCode = `bash -c "$(wget -qLO - https://raw.githubusercontent.com/MacRimi/ProxMenux/main/install_proxmenux.sh)"`
return ( return (
<div className="max-w-3xl 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-3xl font-bold mb-6">Installing ProxMenux</h1>
<h2 className="text-2xl font-semibold mt-8 mb-4">Installation</h2> <h2 className="text-xl font-semibold mt-6 mb-2">Installation</h2>
<p className="mb-4">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p> <p className="mb-2">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p>
<CopyableCode code={installationCode} /> <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> <h2 className="text-xl font-semibold mt-6 mb-2">How to Use</h2>
<p className="mb-4"> <p className="mb-2">
Once installed, launch <strong>ProxMenux</strong> by running: Once installed, launch <strong>ProxMenux</strong> by running:
</p> </p>
<CopyableCode code="menu" /> <div className="w-full overflow-hidden mb-4">
<br /> <CopyableCode code="menu" className="w-full" />
<br /> </div>
<br />
<br /> <h2 className="text-xl font-semibold mt-8 mb-4">Troubleshooting</h2>
<h2 className="text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
<p className="mb-4"> <p className="mb-4">
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">

View File

@ -1,19 +1,24 @@
"use client" "use client"
import type React from "react" import type React from "react"
import { useState } from "react" import { useState } from "react"
import { Copy, Check } from "lucide-react" import { Copy, Check } from "lucide-react"
import { cn } from "@/lib/utils"
interface CopyableCodeProps { interface CopyableCodeProps {
code: string 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 [isCopied, setIsCopied] = useState(false)
const copyToClipboard = async () => { const copyToClipboard = async () => {
try { try {
await navigator.clipboard.writeText(code) await navigator.clipboard.writeText(decodeURIComponent(code))
setIsCopied(true) setIsCopied(true)
setTimeout(() => setIsCopied(false), 2000) setTimeout(() => setIsCopied(false), 2000)
} catch (err) { } catch (err) {
@ -22,16 +27,23 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
} }
return ( return (
<div className="relative my-4"> <div className={cn("relative w-full", className)}>
<pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto"> <pre
<code className="text-sm">{code}</code> 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> </pre>
<button <button
onClick={copyToClipboard} onClick={copyToClipboard}
className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors" className="absolute top-2 right-2 p-1 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
aria-label="Copy to clipboard" 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> </button>
</div> </div>
) )
@ -40,4 +52,3 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
export default CopyableCode export default CopyableCode