Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-06-28 12:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
MacRimi 2025-02-17 23:36:23 +01:00
parent 534b4ab4df
commit d9d66e1301
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/docs/installation/page.tsx
View File

@ -30,3 +30,4 @@ export default function InstallationPage() {
</div> </div>
) )
} }

20
web/components/CopyableCode.tsx
View File

@ -3,17 +3,20 @@
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 +25,16 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
} }
return ( return (
<div className="relative my-4"> <div className={cn("relative", className)}>
<pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto"> <pre className={`bg-gray-100 p-4 rounded-md overflow-x-auto ${language ? `language-${language}` : ""}`}>
<code className="text-sm">{code}</code> <code dangerouslySetInnerHTML={{ __html: decodeURIComponent(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-2 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>
) )
@ -39,4 +42,3 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
export default CopyableCode export default CopyableCode