TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
fro1991
2025-02-01 19:49:27 +07:00
parent 42c2a8e481
commit 13a2c4d42c
57 changed files with 159 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/layouts/auth-branded/AuthBrandedLayout.tsx
View File

@ -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 />