MinecraftUtilities/Frontend
2
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Activity

make code dialog look much nicer
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee 2024-04-18 08:37:43 +01:00
parent 413b52b499
commit 3f8204ddd3
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/code-dialog.tsx
View File

@ -1,6 +1,6 @@
import { ReactElement } from "react"; import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
type CodeDialogProps = { type CodeDialogProps = {
@ -35,10 +35,14 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
<DialogDescription>{description}</DialogDescription> <DialogDescription>{description}</DialogDescription>
</DialogHeader> </DialogHeader>
<SyntaxHighlighter <SyntaxHighlighter
language="javascript" language="json"
style={atelierSeasideDark} style={atomOneDark}
wrapLongLines
customStyle={{ customStyle={{
maxHeight: "600px", maxHeight: "600px",
backgroundColor: "var(--secondary)",
overflow: "hidden",
wordBreak: "break-all",
}} }}
> >
{code} {code}