diff --git a/src/app/os/bin/page.tsx b/src/app/os/bin/page.tsx index 4c84bf7..5233169 100644 --- a/src/app/os/bin/page.tsx +++ b/src/app/os/bin/page.tsx @@ -6,11 +6,13 @@ import { createElement, Prism as SyntaxHighlighter, } from "react-syntax-highlighter"; -import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism"; +import { tomorrow, prism } from "react-syntax-highlighter/dist/esm/styles/prism"; +import { useTheme } from "next-themes"; import Link from "next/link"; -import { GitCompare } from "lucide-react"; +import { GitCompare, Download } from "lucide-react"; import { CopyButton } from "@/components/copy-button"; +import { DownloadButton } from "@/components/download-button"; import { DiffViewer } from "@/components/diff-viewer"; import { addBasePath } from "@/lib/env"; @@ -36,6 +38,8 @@ export default function BinaryDetail() { redirect("/404"); } + const { resolvedTheme } = useTheme(); + const [mounted, setMounted] = useState(false); const [loading, setLoading] = useState(false); const [xml, setXML] = useState(""); const [xmlKeys, setXMLKeys] = useState>(new Set()); @@ -44,6 +48,12 @@ export default function BinaryDetail() { const [compareXml, setCompareXml] = useState(""); const [compareLoading, setCompareLoading] = useState(false); + useEffect(() => { + setMounted(true); + }, []); + + const syntaxTheme = mounted && resolvedTheme === "light" ? prism : tomorrow; + useEffect(() => { async function load() { const engine = await createEngine(group); @@ -114,9 +124,9 @@ export default function BinaryDetail() { return (
- {/* Version history sidebar - now on left and wider */} + {/* Version history sidebar - on right */} {hasVersionHistory && ( -