revamp template

src/layouts/errors/ErrorsLayout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+import { ErrorsLayoutProvider } from './ErrorsLayoutProvider';
+
+const Layout = () => {
+  return (
+    <div className="flex flex-col items-center justify-center grow h-[95%]">
+      <Outlet />
+    </div>
+  );
+};
+
+const ErrorsLayout = () => (
+  <ErrorsLayoutProvider>
+    <Layout />
+  </ErrorsLayoutProvider>
+);
+
+export { ErrorsLayout };

src/layouts/errors/ErrorsLayoutConfig.ts

@@ -0,0 +1,9 @@
+import { type ILayoutConfig } from '@/providers';
+
+// Defining the layout configuration for the errors layout
+const errorsLayoutConfig: ILayoutConfig = {
+  name: 'errors-layout', // Unique identifier for the layout
+  options: {} // Placeholder for layout options, can be customized later
+};
+
+export { errorsLayoutConfig };

src/layouts/errors/ErrorsLayoutProvider.tsx

@@ -0,0 +1,51 @@
+import { createContext, type PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { deepMerge } from '@/utils';
+import { ILayoutConfig, useLayout } from '@/providers';
+import { errorsLayoutConfig } from './ErrorsLayoutConfig';
+
+// Interface defining the properties for the AuthLayoutProvider
+interface AuthLayoutProviderProps {
+  layout: ILayoutConfig; // The layout configuration object
+}
+
+// Initial layout properties using the errors layout configuration
+const initalLayoutProps: AuthLayoutProviderProps = {
+  layout: errorsLayoutConfig // Initial layout is set to errorsLayoutConfig
+};
+
+// Creating a context for managing layout-related state and logic
+const LayoutContext = createContext<AuthLayoutProviderProps>(initalLayoutProps);
+
+// Custom hook to access the layout context, simplifying its use in other components
+const useErrorsLayout = () => useContext(LayoutContext);
+
+// Provider component that manages the state and context for the Errors layout
+const ErrorsLayoutProvider = ({ children }: PropsWithChildren) => {
+  const { getLayout, setCurrentLayout } = useLayout(); // Hook to get and set the layout configuration
+
+  // Function to get and merge the layout configuration
+  const getLayoutConfig = () => {
+    return deepMerge(errorsLayoutConfig, getLayout(errorsLayoutConfig.name)); // Merge errors layout config with any layout changes from getLayout
+  };
+
+  // State that holds the current layout configuration
+  const [layout] = useState(getLayoutConfig); // Initializing layout state with merged configuration
+
+  // Effect to set the current layout whenever the layout state changes
+  useEffect(() => {
+    setCurrentLayout(layout); // Sets the layout context to the current layout configuration
+  });
+
+  return (
+    <LayoutContext.Provider
+      value={{
+        layout // Providing the layout object to child components
+      }}
+    >
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { ErrorsLayoutProvider, useErrorsLayout };

src/layouts/errors/index.ts

@@ -0,0 +1,2 @@
+export * from './ErrorsLayout';
+export * from './ErrorsLayoutConfig';