47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import tw from 'twin.macro'
|
|
import 'styled-components/macro'
|
|
|
|
export default function Input({ label, title, name, id, children, ...props }) {
|
|
return (
|
|
<div css={title != null && tw`my-1`}>
|
|
{title && (
|
|
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
|
|
{title}
|
|
</label>
|
|
)}
|
|
<input {...props} name={name || title} id={id || name || title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
export function TextArea({ label, title, name, id, children, ...props }) {
|
|
return (
|
|
<div tw="my-1">
|
|
{title && (
|
|
<label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
|
|
{title}
|
|
</label>
|
|
)}
|
|
<textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 " />
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function CheckBox({ label, title, name, id, children, ...props }) {
|
|
return (
|
|
<div tw="my-1 flex text-secondary">
|
|
<input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
|
|
{title != null ? (
|
|
<label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>
|
|
{title}
|
|
</label>
|
|
) : null
|
|
}
|
|
{children}
|
|
</div >
|
|
)
|
|
}
|
|
|