58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import clsx from "clsx";
|
|
import { ReactNode, useState } from "react";
|
|
import { renderSanitizedMarkdown } from "~/utils/html-sanitizer";
|
|
import ButtonSecondary from "../buttons/ButtonSecondary";
|
|
import Modal from "../modals/Modal";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function ShowHtmlModalButton({
|
|
html,
|
|
title,
|
|
link,
|
|
size,
|
|
}: {
|
|
html: string | undefined | null;
|
|
title: React.ReactNode;
|
|
link?: {
|
|
href: string;
|
|
target?: undefined | "_blank";
|
|
text?: ReactNode;
|
|
};
|
|
className?: string;
|
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<div className="flex space-x-2">
|
|
<button type="button" disabled={!html} onClick={() => setOpen(true)} className={clsx(html && "underline")}>
|
|
{title}
|
|
</button>
|
|
</div>
|
|
|
|
<Modal size={size} open={open} setOpen={setOpen}>
|
|
<div>
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<div className="text-text-neutral-primary text-lg font-medium">{title ?? t("shared.details")}</div>
|
|
{link && (
|
|
<ButtonSecondary className="group" to={link.href} target={link.target}>
|
|
{link.text}
|
|
</ButtonSecondary>
|
|
)}
|
|
</div>
|
|
<div className="h-[calc(100vh-10rem)] overflow-y-auto">
|
|
<div className="prose border-border-default mt-2 border-t pt-2">
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: renderSanitizedMarkdown(html),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|