Liam
428a95c54d
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { ReactElement } from "react";
|
|
import SyntaxHighlighter from "react-syntax-highlighter";
|
|
import { atelierSeasideDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
|
|
|
|
type CodeDialogProps = {
|
|
/**
|
|
* The title of the dialog.
|
|
*/
|
|
title: string;
|
|
|
|
/**
|
|
* The description of the dialog.
|
|
*/
|
|
description: string;
|
|
|
|
/**
|
|
* The code to show in the dialog.
|
|
*/
|
|
code: string;
|
|
|
|
/**
|
|
* The children for this element.
|
|
*/
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function CodeDialog({ title, description, code, children }: CodeDialogProps): ReactElement {
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
|
<DialogContent className="max-h-[700px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription>{description}</DialogDescription>
|
|
</DialogHeader>
|
|
<SyntaxHighlighter
|
|
language="javascript"
|
|
style={atelierSeasideDark}
|
|
customStyle={{
|
|
maxHeight: "600px",
|
|
}}
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|