revamp template

src/layouts/auth-branded/AuthBrandedLayout.tsx

@@ -0,0 +1,75 @@
+import { Link, Outlet } from 'react-router-dom';
+import { Fragment, useState, useEffect } from 'react';
+import { toAbsoluteUrl } from '@/utils';
+import useBodyClasses from '@/hooks/useBodyClasses';
+import { AuthBrandedLayoutProvider } from './AuthBrandedLayoutProvider';
+
+const Layout = () => {
+  const backgroundImages = [
+    '/media/login-image/img_01.jpg',
+    '/media/login-image/img_02.jpg',
+    '/media/login-image/img_03.jpg'
+  ];
+
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [nextImageIndex, setNextImageIndex] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  useBodyClasses('dark:bg-coal-500');
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const nextIndex = (currentImageIndex + 1) % backgroundImages.length;
+      setNextImageIndex(nextIndex);
+      setIsTransitioning(true);
+
+      setTimeout(() => {
+        setCurrentImageIndex(nextIndex);
+        setIsTransitioning(false);
+      }, 3000);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [currentImageIndex, backgroundImages.length]);
+
+  return (
+    <Fragment>
+      <div className="flex h-full w-full">
+        <div
+          className="order-1 lg:order-1 hidden md:block xl:bg-cover lg:w-8/12 bg-no-repeat branded-bg"
+          style={{ borderRadius: 0 }}
+        >
+          <div className="relative h-screen w-full overflow-hidden">
+            <img
+              src={`${toAbsoluteUrl(backgroundImages[currentImageIndex])}`}
+              className={`absolute top-0 left-0 h-full w-full transition-opacity duration-3000 ${
+                isTransitioning ? 'opacity-0' : 'opacity-100'
+              }`}
+              style={{ objectFit: 'cover' }}
+              alt={`Background ${currentImageIndex}`}
+            />
+
+            {/* Next Image */}
+            <img
+              src={`${toAbsoluteUrl(backgroundImages[nextImageIndex])}`}
+              className={`absolute top-0 left-0 h-full w-full transition-opacity duration-3000 ${
+                isTransitioning ? 'opacity-100' : 'opacity-0'
+              }`}
+              style={{ objectFit: 'cover' }}
+              alt={`Background ${nextImageIndex}`}
+            />
+          </div>
+        </div>
+        <div className="flex justify-center items-center lg:w-4/12 w-full order-2 lg:order-2 bg-white">
+          <Outlet />
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+const AuthBrandedLayout = () => (
+  <AuthBrandedLayoutProvider>
+    <Layout />
+  </AuthBrandedLayoutProvider>
+);
+
+export { AuthBrandedLayout };

src/layouts/auth-branded/AuthBrandedLayoutConfig.ts

@@ -0,0 +1,12 @@
+import { type ILayoutConfig } from '@/providers/LayoutProvider';
+
+// Defining the configuration for the branded authentication layout
+const authLayoutBrandedConfig: ILayoutConfig = {
+  // Setting the layout name to 'auth-branded'
+  name: 'auth-branded',
+
+  // Currently no additional options defined, but this object can be extended in the future
+  options: {}
+};
+
+export { authLayoutBrandedConfig };

src/layouts/auth-branded/AuthBrandedLayoutProvider.tsx

@@ -0,0 +1,52 @@
+import { createContext, type PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { deepMerge } from '@/utils';
+import { ILayoutConfig, useLayout } from '@/providers';
+import { authLayoutBrandedConfig } from './AuthBrandedLayoutConfig';
+
+// Defining the interface for AuthLayoutProvider's props, which includes a layout of type ILayoutConfig
+interface AuthLayoutProviderProps {
+  layout: ILayoutConfig;
+}
+
+// Initial layout properties for the AuthBrandedLayoutProvider, using authLayoutBrandedConfig as the default layout
+const initalLayoutProps: AuthLayoutProviderProps = {
+  layout: authLayoutBrandedConfig
+};
+
+// Creating a context for the AuthBrandedLayout with the initial layout properties
+const LayoutContext = createContext<AuthLayoutProviderProps>(initalLayoutProps);
+
+// Custom hook to access the AuthBrandedLayout context, allowing other components to use the layout data
+const useAuthBrandedLayout = () => useContext(LayoutContext);
+
+// AuthBrandedLayoutProvider component that wraps its children with the layout context
+const AuthBrandedLayoutProvider = ({ children }: PropsWithChildren) => {
+  const { getLayout, setCurrentLayout } = useLayout(); // Access layout-related functions
+
+  // Function to merge the current layout with the branded auth layout configuration
+  const getLayoutConfig = () => {
+    return deepMerge(authLayoutBrandedConfig, getLayout(authLayoutBrandedConfig.name));
+  };
+
+  // Setting the layout state with the merged layout configuration
+  const [layout] = useState(getLayoutConfig);
+
+  // Effect hook to set the current layout whenever the layout state changes
+  useEffect(() => {
+    setCurrentLayout(layout);
+  }, []);
+
+  // Providing the layout context to all child components wrapped by AuthBrandedLayoutProvider
+  return (
+    <LayoutContext.Provider
+      value={{
+        layout
+      }}
+    >
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { AuthBrandedLayoutProvider, useAuthBrandedLayout };

src/layouts/auth-branded/index.ts

@@ -0,0 +1 @@
+export * from './AuthBrandedLayout';