sigit.io/src/layouts/modal/index.tsx

import { Button, IconButton, Modal as ModalMui } from '@mui/material'
import {
  Link,
  matchPath,
  Outlet,
  useLocation,
  useNavigate
} from 'react-router-dom'
import styles from './style.module.scss'
import { appPublicRoutes } from '../../routes'
import { faClose } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import nostrImage from '../../assets/images/nostr.gif'

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',
      sx: { padding: '10px' },
      label: <img src={nostrImage} width="25" alt="nostr logo" height="25" />
    }
  ]
  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">
      <div className={styles.modal}>
        <header className={styles.header}>
          <h2 className={styles.title} id="modal-title">
            {tabs.find((t) => activeTab === t.to)?.title}
          </h2>
          <IconButton
            onClick={handleClose}
            sx={{
              fontSize: '18px',
              color: 'rgba(0, 0, 0, 0.5)',
              padding: '8px 15px',
              borderRadius: '4px',
              ':hover': {
                background: 'var(--primary-light)',
                color: 'white'
              }
            }}
          >
            <FontAwesomeIcon icon={faClose} />
          </IconButton>
        </header>

        <main className={styles.body}>
          <ul>
            {tabs.map((t) => {
              return (
                <li key={t.to}>
                  <Button
                    component={Link}
                    to={t.to}
                    sx={{
                      width: '100%',
                      height: '100%',
                      ...(t?.sx ? t.sx : {})
                    }}
                    variant={
                      activeTab === t.to || t.to === appPublicRoutes.nostr
                        ? 'contained'
                        : 'text'
                    }
                  >
                    {t.label}
                  </Button>
                </li>
              )
            })}
          </ul>
          {activeTab === appPublicRoutes.login ||
          activeTab === appPublicRoutes.register ? (
            <div className={styles.comingSoon}>Coming soon!</div>
          ) : null}
          <div className={styles.tabContent}>
            <Outlet />
          </div>
        </main>

        <footer className={styles.footer}>Welcome to SIGit!</footer>
      </div>
    </ModalMui>
  )
}