78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
|
import { Box, Button, Modal as ModalMui, Typography } from '@mui/material'
|
||
|
|
import {
|
||
|
|
Link,
|
||
|
|
matchPath,
|
||
|
|
Outlet,
|
||
|
|
useLocation,
|
||
|
|
useNavigate
|
||
|
|
} from 'react-router-dom'
|
||
|
|
import styles from './style.module.scss'
|
||
|
|
import { appPublicRoutes } from '../../routes'
|
||
|
|
|
||
|
|
function useRouteMatch(patterns: readonly string[]) {
|
||
|
|
const { pathname } = useLocation()
|
||
|
|
|
||
|
|
for (let i = 0; i < patterns.length; i += 1) {
|
||
|
|
const pattern = patterns[i]
|
||
|
|
const possibleMatch = matchPath(pattern, pathname)
|
||
|
|
if (possibleMatch !== null) {
|
||
|
|
return possibleMatch
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Modal = () => {
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const tabs = [
|
||
|
|
{ to: appPublicRoutes.login, title: 'Login', label: 'Login' },
|
||
|
|
{ to: appPublicRoutes.register, title: 'Register', label: 'Register' },
|
||
|
|
{ to: appPublicRoutes.nostr, title: 'Login', label: <>Ostrich</> }
|
||
|
|
]
|
||
|
|
const routeMatch = useRouteMatch(tabs.map((t) => t.to))
|
||
|
|
const activeTab = routeMatch?.pattern?.path
|
||
|
|
const handleClose = () => {
|
||
|
|
navigate(appPublicRoutes.landingPage)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ModalMui
|
||
|
|
open={true}
|
||
|
|
onClose={handleClose}
|
||
|
|
aria-labelledby="modal-title"
|
||
|
|
aria-describedby="modal-description"
|
||
|
|
>
|
||
|
|
<Box className={styles.modal}>
|
||
|
|
<Typography id="modal-title" variant="h2">
|
||
|
|
Login
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<Box component={'ul'}>
|
||
|
|
{tabs.map((t) => {
|
||
|
|
return (
|
||
|
|
<Link to={t.to} key={t.to}>
|
||
|
|
<Button
|
||
|
|
variant={
|
||
|
|
activeTab === t.to || t.to === appPublicRoutes.nostr
|
||
|
|
? 'contained'
|
||
|
|
: 'text'
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{t.label}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Outlet />
|
||
|
|
|
||
|
|
<Typography id="modal-description" variant="h4">
|
||
|
|
Welcome to Sigit
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
</ModalMui>
|
||
|
|
)
|
||
|
|
}
|