mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-08-13 08:22:22 +00:00
update
This commit is contained in:
parent
0f4f4195bd
commit
f72fa7e5d1
@ -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">
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user