update
This commit is contained in:
fro1991
@ -1,71 +1,59 @@
|
||||
import { Link, Outlet } from 'react-router-dom';
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import { Fragment } 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);
|
||||
// Applying body classes to manage the background color in dark mode
|
||||
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}`}
|
||||
/>
|
||||
<style>
|
||||
{`
|
||||
.branded-bg {
|
||||
background-image: url('${toAbsoluteUrl('/media/images/2600x1600/7.png')}');
|
||||
}
|
||||
.dark .branded-bg {
|
||||
background-image: url('${toAbsoluteUrl('/media/images/2600x1600/1-dark.png')}');
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{/* 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">
|
||||
<div className="grid lg:grid-cols-2 grow">
|
||||
<div className="flex justify-center items-center p-8 lg:p-10 order-2 lg:order-1">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
<div className="lg:rounded-xl lg:border lg:border-gray-200 lg:m-5 order-1 lg:order-2 bg-top xxl:bg-center xl:bg-cover bg-no-repeat branded-bg">
|
||||
<div className="flex flex-col p-8 lg:p-16 gap-4">
|
||||
<Link to="/">
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/app/app-logo.png')}
|
||||
className="h-12 max-w-none"
|
||||
alt=""
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<h3 className="text-2xl font-semibold text-gray-900">TPAY Dashboard Portal</h3>
|
||||
<div className="text-base font-medium text-gray-600">
|
||||
A user-friendly interface providing seamless access to TPAY’s
|
||||
<span className="text-gray-900 font-semibold">
|
||||
<br />
|
||||
transaction management, reporting tools, and configuration settings.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
// AuthBrandedLayout component that wraps the Layout component with AuthBrandedLayoutProvider
|
||||
const AuthBrandedLayout = () => (
|
||||
<AuthBrandedLayoutProvider>
|
||||
<Layout />
|
||||
|
||||
@ -43,59 +43,19 @@ const HeaderLogo = () => {
|
||||
alt="logo"
|
||||
/> */}
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/app/bri_tl_logo.png')}
|
||||
src={toAbsoluteUrl('/media/app/app-logo.png')}
|
||||
className="dark:hidden h-10"
|
||||
alt="logo"
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/app/bri_tl_logo.png')}
|
||||
src={toAbsoluteUrl('/media/app/app-logo.png')}
|
||||
className="hidden dark:inline-block min-h-[42px]"
|
||||
alt="logo"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center">
|
||||
<h3 className="text-gray-700 text-base hidden md:block">Brillian Apps</h3>
|
||||
<span className="text-sm text-gray-400 font-medium px-2.5 hidden md:inline">/</span>
|
||||
|
||||
<Menu className="menu-default">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-end' : 'bottom-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="text-gray-900 font-medium">
|
||||
{selectedMenuItem.title}
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="down" />
|
||||
</MenuArrow>
|
||||
</MenuToggle>
|
||||
<MenuSub className="menu-default w-48">
|
||||
{MENU_ROOT.map((item, index) => (
|
||||
<MenuItem key={index} className={item === selectedMenuItem ? 'active' : ''}>
|
||||
<MenuLink path={item.path}>
|
||||
{item.icon && (
|
||||
<MenuIcon>
|
||||
<KeenIcon icon={item.icon} />
|
||||
</MenuIcon>
|
||||
)}
|
||||
<MenuTitle>{item.title}</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<h3 className="text-gray-700 text-base hidden md:block">TPAY Dashboard Portal</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user