cleanup
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s

This commit is contained in:
Lee 2024-04-18 08:45:57 +01:00
parent ccd0e0851c
commit f69d69373c
2 changed files with 36 additions and 16 deletions

@ -1,6 +1,5 @@
import { ReactElement } from "react"; import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter"; import { CodeHighlighter } from "./code-highlighter";
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 = {
@ -34,20 +33,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription> <DialogDescription>{description}</DialogDescription>
</DialogHeader> </DialogHeader>
<SyntaxHighlighter <CodeHighlighter code={code} />
language="json"
style={atomOneDark}
wrapLongLines
customStyle={{
maxHeight: "600px",
backgroundColor: "hsl(var(--popover))",
overflow: "hidden",
wordBreak: "break-all",
borderRadius: "0.75rem",
}}
>
{code}
</SyntaxHighlighter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

@ -0,0 +1,34 @@
import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
type CodeHighlighterProps = {
/**
* The code to highlight.
*/
code: string;
/**
* Should the element be rounded?
*/
rounded?: boolean;
};
export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
return (
<SyntaxHighlighter
language="json"
style={atomOneDark}
wrapLongLines
customStyle={{
maxHeight: "600px",
backgroundColor: "hsl(var(--popover))",
overflow: "hidden",
wordBreak: "break-all",
borderRadius: rounded ? "0.75rem" : undefined,
}}
>
{code}
</SyntaxHighlighter>
);
}