feat: add LoginPage and ScrollToTop components with App routing integration
This commit is contained in:
parent
ca77602a67
commit
52b497cebb
3 changed files with 38 additions and 0 deletions
|
|
@ -30,12 +30,14 @@ import { LabelPreviewPage } from './pages/dashboard/LabelPreviewPage';
|
|||
import { StorePreviewPage } from './pages/StorePreviewPage';
|
||||
import { LoadingProvider } from './context/LoadingContext';
|
||||
import { Preloader } from './components/common/Preloader';
|
||||
import { ScrollToTop } from './components/common/ScrollToTop';
|
||||
|
||||
export const App: React.FC = () => {
|
||||
return (
|
||||
<SellerProvider>
|
||||
<LoadingProvider>
|
||||
<Router>
|
||||
<ScrollToTop />
|
||||
<Preloader />
|
||||
<Routes>
|
||||
{/* Public Marketing & Informational Zone */}
|
||||
|
|
|
|||
27
src/components/common/ScrollToTop.tsx
Normal file
27
src/components/common/ScrollToTop.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* ScrollToTop component listens for route changes and automatically resets
|
||||
* the viewport scroll position to the top of the page.
|
||||
*/
|
||||
export const ScrollToTop: React.FC = () => {
|
||||
const { pathname, search } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'instant' as ScrollBehavior,
|
||||
});
|
||||
|
||||
if (document.documentElement) {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
if (document.body) {
|
||||
document.body.scrollTop = 0;
|
||||
}
|
||||
}, [pathname, search]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
|
@ -50,8 +50,17 @@ export const LoginPage: React.FC<LoginPageProps> = ({ initialMode }) => {
|
|||
} else if (location.pathname === '/login') {
|
||||
setMode('login');
|
||||
}
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
||||
if (document.documentElement) document.documentElement.scrollTop = 0;
|
||||
if (document.body) document.body.scrollTop = 0;
|
||||
}, [location.pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
||||
if (document.documentElement) document.documentElement.scrollTop = 0;
|
||||
if (document.body) document.body.scrollTop = 0;
|
||||
}, [mode]);
|
||||
|
||||
// Login state
|
||||
const [mobileNumber, setMobileNumber] = useState('');
|
||||
const [loginOtp, setLoginOtp] = useState('');
|
||||
|
|
|
|||
Loading…
Reference in a new issue