Added flex-cms and created a page to showcase

Author: MacdonaldRobinson

package-lock.json

@@ -20,6 +20,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "firebase": "^11.6.0",
+    "flex-cms": "^0.1.9",
     "lodash": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package.json

@@ -11,6 +11,7 @@ import ChatContextProvider from "./chat/contexts/ChatContextProvider";
 const HomePage = React.lazy(() => import("../src/pages/HomePage/HomePage"));
 const BlogPage = React.lazy(() => import("../src/pages/BlogPage/BlogPage"));
 const ChatPage = React.lazy(() => import("../src/pages/ChatPage/ChatPage"));
+const CMSPage = React.lazy(() => import("../src/pages/CMSPage/CMSPage"));
 
 const queryClient = new QueryClient();
 
@@ -43,6 +44,14 @@ const router = createBrowserRouter(
                 </PageLayout>
             ),
         },
+        {
+            path: "/cms",
+            element: (
+                <PageLayout>
+                    <CMSPage />
+                </PageLayout>
+            ),
+        },
     ],
     { basename: basePath }
 );

src/App.tsx

@@ -14,6 +14,9 @@ const MainMenu = () => {
                 <li>
                     <NavLink to={"/chat"}>Chat</NavLink>
                 </li>
+                <li>
+                    <NavLink to={"/cms"}>CMS</NavLink>
+                </li>
             </ul>
         </MainMenuWrapper>
     );

src/components/Header/MainMenu/MainMenu.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const CMSPageWrapper = styled.section`
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+
+    & div {
+        align-self: stretch;
+    }
+`;

src/pages/CMSPage/CMSPage.styles.tsx

@@ -0,0 +1,17 @@
+import { AuthButton, EditableContent } from "flex-cms";
+import { CMSPageWrapper } from "./CMSPage.styles";
+
+const CMSPage = () => {
+    return (
+        <CMSPageWrapper>
+            <AuthButton />
+            <div>
+                <EditableContent contentId="CMS Content">
+                    This is some inital content
+                </EditableContent>
+            </div>
+        </CMSPageWrapper>
+    );
+};
+
+export default CMSPage;