48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
import { Textarea } from "@nextui-org/input";
|
|
import { Card } from "@nextui-org/react";
|
|
import { useCallback, useState } from "react";
|
|
import DOMPurify from "dompurify";
|
|
import Script from "next/script";
|
|
|
|
export default function StaticPageBuilder() {
|
|
const [content, setContent] = useState("");
|
|
|
|
const generatedPage = useCallback(() => {
|
|
const sanitizedContent = DOMPurify.sanitize(content);
|
|
return (
|
|
<Card className="rounded-md border p-4">
|
|
<div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
|
|
</Card>
|
|
);
|
|
}, [content]);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2">
|
|
<div className="flex flex-col gap-2 px-4">
|
|
Editor
|
|
<Textarea
|
|
variant="bordered"
|
|
label=""
|
|
labelPlacement="outside"
|
|
placeholder=""
|
|
className="max-h-[80vh]"
|
|
classNames={{
|
|
mainWrapper: "h-[80vh] overflow-hidden",
|
|
innerWrapper: "h-[80vh] overflow-hidden",
|
|
input: "min-h-full",
|
|
inputWrapper: "h-full",
|
|
}}
|
|
value={content}
|
|
onValueChange={setContent}
|
|
disableAutosize={false}
|
|
/>
|
|
</div>
|
|
<div className="px-4 flex flex-col gap-2">
|
|
Preview
|
|
{generatedPage()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|