make code dialog look much nicer
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
This commit is contained in:
parent
413b52b499
commit
3f8204ddd3
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user