Enhance Theme Management with New Theme Manager Component

packages/app-page-builder/src/admin/components/ColorPicker.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface ColorPickerProps {
+    value: { color: string };
+    onChange: (value: { color: string }) => void;
+}
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
+    const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ ...value, color: e.target.value });
+    };
+
+    return (
+        <div className="color-picker">
+            <label>
+                Color:
+                <input type="color" value={value.color || "#000000"} onChange={handleColorChange} />
+            </label>
+        </div>
+    );
+};
+
+export default ColorPicker;

packages/app-page-builder/src/admin/components/ThemeManager.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import TypographySelector from "./TypographySelector";
+import ColorPicker from "./ColorPicker";
+
+const ThemeManager: React.FC = () => {
+    const [typography, setTypography] = useState<{ fontFamily: string; fontSize: number }>({
+        fontFamily: "",
+        fontSize: 16
+    });
+
+    const [colorScheme, setColorScheme] = useState<{ color: string }>({ color: "#000000" });
+
+    const handleSave = () => {
+        console.log("Typography settings:", typography);
+        console.log("Color scheme settings:", colorScheme);
+
+        localStorage.setItem("typographySettings", JSON.stringify(typography));
+        localStorage.setItem("colorSchemeSettings", JSON.stringify(colorScheme));
+
+        fetch("/api/save-theme-settings", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                typography,
+                colorScheme
+            })
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log("Success:", data);
+            })
+            .catch(error => {
+                console.error("Error:", error);
+            });
+    };
+
+    return (
+        <div className="theme-manager">
+            <h2>Theme Manager</h2>
+            {/* Render the TypographySelector and ColorPicker components */}
+            <TypographySelector value={typography} onChange={setTypography} />
+            <ColorPicker value={colorScheme} onChange={setColorScheme} />
+            {/* Button to save the settings */}
+            <button onClick={handleSave}>Save Theme</button>
+        </div>
+    );
+};
+
+export default ThemeManager;

packages/app-page-builder/src/admin/components/TypographySelector.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface TypographySelectorProps {
+    value: { fontFamily: string; fontSize: number };
+    onChange: (value: { fontFamily: string; fontSize: number }) => void;
+}
+
+const TypographySelector: React.FC<TypographySelectorProps> = ({ value, onChange }) => {
+    const handleFontChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ ...value, fontFamily: e.target.value });
+    };
+
+    const handleSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ ...value, fontSize: parseInt(e.target.value, 10) });
+    };
+
+    return (
+        <div className="typography-selector">
+            <label>
+                Font Family:
+                <input type="text" value={value.fontFamily || ""} onChange={handleFontChange} />
+            </label>
+            <label>
+                Font Size:
+                <input type="number" value={value.fontSize || 16} onChange={handleSizeChange} />
+            </label>
+        </div>
+    );
+};
+
+export default TypographySelector;