This commit is contained in:
parent
ccd0e0851c
commit
f69d69373c
@ -1,6 +1,5 @@
|
||||
import { ReactElement } from "react";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||||
import { CodeHighlighter } from "./code-highlighter";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
|
||||
|
||||
type CodeDialogProps = {
|
||||
@ -34,20 +33,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<SyntaxHighlighter
|
||||
language="json"
|
||||
style={atomOneDark}
|
||||
wrapLongLines
|
||||
customStyle={{
|
||||
maxHeight: "600px",
|
||||
backgroundColor: "hsl(var(--popover))",
|
||||
overflow: "hidden",
|
||||
wordBreak: "break-all",
|
||||
borderRadius: "0.75rem",
|
||||
}}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
<CodeHighlighter code={code} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
34
src/app/components/code-highlighter.tsx
Normal file
34
src/app/components/code-highlighter.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user