feat:static page generator

app/(admin)/admin/static-page/page.tsx

@@ -0,0 +1,10 @@
+import StaticPageBuilder from "@/components/main/static-page/static-page-main";
+import { Card } from "@nextui-org/react";
+
+export default function StaticPageGenerator() {
+  return (
+    <Card className="rounded-md border bg-transparent p-4">
+      <StaticPageBuilder />
+    </Card>
+  );
+}

components/layout/sidebar/sidebar.tsx

@@ -107,6 +107,20 @@ const sideBarDummyData = [
     statusName: "Active",
     childModule: null,
   },
+  {
+    id: 11,
+    name: "Static Page",
+    moduleId: 652,
+    moduleName: "Dashboard",
+    modulePathUrl: "/admin/static-page",
+    parentId: -1,
+    icon: <FormValidationIcon />,
+    position: 1,
+    statusId: 1,
+    childMenu: [],
+    statusName: "Active",
+    childModule: null,
+  },
   // {
   //     id: 4,
   //     name: "E-Magazine",

components/main/static-page/static-page-main.tsx

@@ -0,0 +1,47 @@
+"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>
+  );
+}

package-lock.json

@@ -33,6 +33,7 @@
         "axios": "^1.6.8",
         "clsx": "^2.0.0",
         "dayjs": "^1.11.13",
+        "dompurify": "^3.2.0",
         "eslint": "8.48.0",
         "eslint-config-next": "14.0.2",
         "framer-motion": "^10.18.0",
@@ -3809,6 +3810,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.0.tgz",
+      "integrity": "sha512-AMdOzK44oFWqHEi0wpOqix/fUNY707OmoeFDnbi3Q5I8uOpy21ufUA5cDJPr0bosxrflOVD/H2DMSvuGKJGfmQ=="
+    },
     "node_modules/domutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",

package.json

@@ -34,6 +34,7 @@
     "axios": "^1.6.8",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.2.0",
     "eslint": "8.48.0",
     "eslint-config-next": "14.0.2",
     "framer-motion": "^10.18.0",