48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
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;
|