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'

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="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
          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)'
            }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="-96 0 512 512"
              width="1em"
              height="1em"
              fill="currentColor"
            >
              {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
              <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path>
            </svg>
          </IconButton>
        </header>

        <main className={styles.body}>
          <ul>
            {tabs.map((t) => {
              return (
                <li>
                  <Button
                    component={Link}
                    to={t.to}
                    key={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>
          <Outlet />
        </main>

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