Adding Modal Component and Login View

components/ui/Modal/Modal.module.css

@@ -0,0 +1,8 @@
+.root {
+  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  @apply bg-white p-12;
+}

components/ui/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProvider,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { FocusScope } from '@react-aria/focus'
+
+interface Props {
+  className?: string
+  children?: any
+  show?: boolean
+  close: () => void
+}
+
+const Modal: FC<Props> = ({
+  className,
+  children,
+  show = true,
+  close,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  usePreventScroll()
+  let { modalProps } = useModal()
+  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog(props, ref)
+
+  return (
+    <div className={rootClassName}>
+      <FocusScope contain restoreFocus autoFocus>
+        <div
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          className={s.modal}
+        >
+          {children}
+        </div>
+      </FocusScope>
+    </div>
+  )
+}
+
+export default Modal

components/ui/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal'