56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
|
import { FC } from 'react'
|
||
|
|
import styles from './AuthLayout.module.scss'
|
||
|
|
|
||
|
|
const AuthLayout: FC = (props) => (
|
||
|
|
<div className={`${styles.root} min-h-screen`}>
|
||
|
|
<aside className="bg-pink-300 flex justify-center items-center">
|
||
|
|
<h1 className="text-4xl">Wishes</h1>
|
||
|
|
</aside>
|
||
|
|
<main className="flex flex-col justify-center items-center">
|
||
|
|
<div>{props.children}</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
|
||
|
|
interface AuthFieldProps {
|
||
|
|
name: string
|
||
|
|
required?: boolean
|
||
|
|
type: 'text' | 'password'
|
||
|
|
}
|
||
|
|
const AuthField: FC<AuthFieldProps> = (props) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<label
|
||
|
|
htmlFor={props.name}
|
||
|
|
className="block text-gray-800 text-sm font-bold mb-2"
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name={props.name}
|
||
|
|
required
|
||
|
|
className="appearance-none border rounded w-full py-2 px-3 text-gray-800 leading-tight"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
interface AuthPasswordProps {
|
||
|
|
name: string
|
||
|
|
required?: boolean
|
||
|
|
}
|
||
|
|
export const AuthPassword: FC<AuthPasswordProps> = (props) => (
|
||
|
|
<AuthField {...props} type="password" />
|
||
|
|
)
|
||
|
|
|
||
|
|
interface AuthInputProps {
|
||
|
|
name: string
|
||
|
|
required?: boolean
|
||
|
|
}
|
||
|
|
export const AuthInput: FC<AuthPasswordProps> = (props) => (
|
||
|
|
<AuthField {...props} type="text" />
|
||
|
|
)
|
||
|
|
|
||
|
|
export default AuthLayout
|