Migrated from React to NextJS

client/components/LoginModal.tsx

@@ -0,0 +1,47 @@
+import { Dialog, Tab } from '@headlessui/react';
+import { FC, useEffect, useRef } from 'react';
+
+import LoginForm from './LoginForm';
+import LoginModalTab from './LoginModalTab';
+import SignupForm from './SignupForm';
+
+export interface LoginModelProps {
+  isOpen: boolean;
+  onClose: () => any;
+  defaultPage?: number;
+}
+
+const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
+      <div className="bg-black/80 fixed inset-0 flex items-center justify-center">
+        <Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
+          <div className="flex flex-row items-center justify-center">
+            <Dialog.Title className="text-xl">
+              <img src="./assets/images/logo.png" className="inline w-12 h-12" alt="logo" /> Log in to twitch-clone
+            </Dialog.Title>
+          </div>
+          <Tab.Group defaultIndex={defaultPage}>
+            <Tab.List className="space-x-4 border-b border-b-neutral-100/40 mt-4">
+              <Tab>
+                {({ selected }) => <LoginModalTab selected={selected}>Log In</LoginModalTab>}
+              </Tab>
+              <Tab>
+                {({ selected }) => <LoginModalTab selected={selected}>Sign Up</LoginModalTab>}
+              </Tab>
+            </Tab.List>
+            <Tab.Panels className="mt-4">
+              <Tab.Panel>
+                <LoginForm />
+              </Tab.Panel>
+              <Tab.Panel>
+                <SignupForm />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </Dialog.Panel>
+      </div>
+    </Dialog>)
+};
+
+export default LoginModal;