Posts integration

package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "lru-cache": "^11.2.7",
     "next": "16.1.6",
+    "rate-limiter-flexible": "^10.0.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "sass": "^1.98.0"

src/app/_posts-generator/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { UsersGeneratorContext } from "./template";
+import { useContext, useMemo } from "react";
+import SwitchSection from "@/components/switch-section";
+import { useFetchPosts } from "@/hooks/useFetchPosts";
+import { Button } from "@/components/ui";
+import * as Prism from "prismjs";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-sql";
+import buildQuery from "@/utilities/buildQuery";
+
+export default function UsersGeneratorPage() {
+  const {
+    count,
+    seed,
+  } = useContext(UsersGeneratorContext);
+
+  const { isLoading, refetch, data } = useFetchPosts();
+
+  const highlightedJson = useMemo(() => {
+    if (!data) return "[]";
+    if (!data.ok) return Prism.highlight(data.error, Prism.languages.json, "json");
+    const jsonString = JSON.stringify(data.value, null, 2);
+    return Prism.highlight(jsonString, Prism.languages.json, "json");
+  }, [data]);
+
+  const highlightedSql = useMemo(() => {
+    if (!data) return "";
+    if (!data.ok) return Prism.highlight(data.error, Prism.languages.json, "json");
+    const sqlString = buildQuery(data);
+    return Prism.highlight(sqlString, Prism.languages.sql, "sql");
+  }, [data]);
+
+  const handleGenerate = () => {
+    refetch({ count, seed });
+  }
+
+  return (
+    <>
+      <h1>Random posts generator</h1>
+
+      <Button variant="primary" onClick={handleGenerate} disabled={isLoading}>Generate</Button>
+
+      <SwitchSection className="mt-2">
+        <div id="json">
+          <pre>
+            <code
+              className="language-json"
+              dangerouslySetInnerHTML={{ __html: highlightedJson }}
+            />
+          </pre>
+        </div>
+
+        <div id="sql">
+          <pre>
+            <code
+              className="language-sql"
+              dangerouslySetInnerHTML={{ __html: highlightedSql }}
+            />
+          </pre>
+        </div>
+      </SwitchSection>
+    </>
+  );
+}

src/app/_posts-generator/template.tsx

@@ -0,0 +1,40 @@
+"use client";
+import { ReactNode, createContext, useState } from "react";
+import Sidebar from "@/components/sidebar";
+import { Input } from "@/components/ui";
+import { cn } from "@/utilities";
+import { PostArgs } from "@/types/generator";
+
+export const UsersGeneratorContext = createContext<PostArgs>({
+  count: 10,
+  seed: undefined,
+});
+
+export default function UsersGeneratorTemplate({ children }: { children: ReactNode }) {
+  const [count, setCount] = useState<number>(10);
+  const [seed, setSeed] = useState<number | undefined>(undefined);
+
+  return (
+    <>
+      <UsersGeneratorContext.Provider value={{ count, seed }}>
+        <Sidebar>
+          <h2 className="mb-4">Settings</h2>
+          <div className={cn("grid-2-columns", "width-100", "gap-2")}>
+            <div>Count</div>
+            <div className={cn("justify-self-end", "flex-align-center")}>
+              <Input type="number" value={count.toString() || ""} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCount(Number(e.target.value) ? Number(e.target.value) : 0)} />
+            </div>
+
+            <div>Seed</div>
+            <div className={cn("justify-self-end", "flex-align-center")}>
+              <Input type="number" value={seed?.toString() || ""} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSeed(Number(e.target.value) ? Number(e.target.value) : undefined)} />
+            </div>
+          </div>
+        </Sidebar>
+        <div className="main-with-sidebar">
+          {children}
+        </div>
+      </UsersGeneratorContext.Provider>
+    </>
+  );
+}