This commit is contained in:
parent
ccd0e0851c
commit
f69d69373c
@ -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>
|
||||||
);
|
);
|
||||||
|
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