chore: refactor components

front/components/UI/Elements/Menu.tsx

@@ -6,13 +6,9 @@ import learnhouseIcon from "public/learnhouse_icon.png";
 import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { headers } from "next/headers";
-import { getOrgFromUri, getUriWithOrg } from "@services/config/config";
+import { getUriWithOrg } from "@services/config/config";
 
 export const Menu = (props : any ) => {
-  const router = useRouter();
-  const pathname = usePathname();
   const orgslug = props.orgslug;
   
   

front/components/UI/Header.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import Link from 'next/link'
-import styled from "styled-components";
-
-
-export const Header = () => {
-  return (
-    <div>
-    </div>
-  );
-};
-
-

front/components/UI/Layout.tsx

@@ -1,66 +0,0 @@
-"use client";
-import React from "react";
-import Head from "next/head";
-import styled from "styled-components";
-import AuthProvider from "../Security/AuthProvider";
-import { motion } from "framer-motion";
-import { Menu } from "./Elements/Menu";
-
-const Layout = (props: any) => {
-  const variants = {
-    hidden: { opacity: 0, x: 0, y: 0 },
-    enter: { opacity: 1, x: 0, y: 0 },
-    exit: { opacity: 0, x: 0, y: 0 },
-  };
-
-  return (
-      <AuthProvider>
-        <ProjectPhaseLabel>🚧 Dev Phase</ProjectPhaseLabel>
-        <Menu orgslug={props.orgslug}></Menu>
-        <motion.main
-          variants={variants} // Pass the variant object into Framer Motion
-          initial="hidden" // Set the initial state to variants.hidden
-          animate="enter" // Animated state to variants.enter
-          exit="exit" // Exit state (used later) to variants.exit
-          transition={{ type: "linear" }} // Set the transition to linear
-          className=""
-        >
-          <Main className="min-h-screen">{props.children}</Main>
-        </motion.main>
-        <Footer>
-          <p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
-        </Footer>
-      </AuthProvider>
-  );
-};
-
-const Main = styled.main`
-  min-height: 100vh;
-`;
-
-const Footer = styled.footer`
-  display: flex;
-  justify-content: center;
-  margin: 20px;
-  font-size: 16px;
-
-  img {
-    width: 20px;
-    opacity: 0.4;
-    display: inline;
-  }
-`;
-
-export const ProjectPhaseLabel = styled.div`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding: 9px;
-  background-color: #080501;
-  color: white;
-  font-size: 19px;
-  font-weight: bold;
-  border-radius: 5px 0 0 0px;
-`;
-
-export default Layout;

front/components/UI/Modal/Modal.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
 import { violet, blackA, mauve, green } from '@radix-ui/colors';
-import { Cross2Icon } from '@radix-ui/react-icons';
 
 type ModalParams = {
     dialogTitle: string;

front/components/UI/libs/styled-registry.tsx

@@ -0,0 +1,30 @@
+
+'use client';
+
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children as React.ReactChild}
+    </StyleSheetManager>
+  );
+}