gistfile1.txt

import { Dispatch, SetStateAction } from 'react';

import { MainNavigationItems } from './MainNavigationItems';
import { Transition } from './Transition';

export interface IProps {
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
}

export const MobileNavigation = ({ open, setOpen }: IProps) => (
  <div className="lg:hidden">
    <Transition show={open} className="fixed inset-0 flex z-40">
      <Transition
        enter="transition-opacity ease-linear duration-300"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity ease-linear duration-300"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
        className="fixed inset-0"
      >
        <div className="absolute inset-0 bg-gray-600 opacity-75" />
      </Transition>

      <Transition
        enter="transition ease-in-out duration-300 transform"
        enterFrom="-translate-x-full"
        enterTo="translate-x-0"
        leave="transition ease-in-out duration-300 transform"
        leaveFrom="translate-x-0"
        leaveTo="-translate-x-full"
        className="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-mainblue-600"
      >
        <div className="absolute top-0 right-0 -mr-14 p-1">
          <button
            className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-cool-gray-600"
            aria-label="Close sidebar"
            onClick={() => setOpen(false)}
          >
            <svg className="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="flex-shrink-0 flex items-center px-4">
          <img className="h-8 w-auto" src="/images/SettleMint_logo_hor_neg.svg" alt="SettleMint" />
        </div>
        <MainNavigationItems />
      </Transition>
      <div className="flex-shrink-0 w-14" />
    </Transition>
  </div>
);