wishlist-client/components/layout/authentication/AuthLayout.tsx

56 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-04-24 23:12:11 +02:00
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