41 lines
2.0 KiB
JavaScript
41 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function Input(props) {
|
|
return (
|
|
<div className={props.title != null ? "my-1": ""}>
|
|
{props.title != null ? (
|
|
<label {...props.label} className={"block text-secondary text-sm font-bold mb-1 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
|
|
{props.title}
|
|
</label>
|
|
) : null}
|
|
<input {...props} name={props.name || props.title} id={props.id || props.name || props.title} className={"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 "+props.className}/>
|
|
{props.children}
|
|
</div>
|
|
)
|
|
}
|
|
export function TextArea({label, title, name, id, children, ...props}) {
|
|
return (
|
|
<div className="my-1">
|
|
<label {...label} className={"block text-secondary text-sm font-bold mb-2 "+ label?.className} htmlFor={id ?? name ?? title}>
|
|
{title}
|
|
</label>
|
|
<textarea {...props} name={name ?? title} id={id ?? name ?? props.title} className={"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 "+props.className}/>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function CheckBox({label, title, name, id, children, ...props}){
|
|
return(
|
|
<div class="my-1 flex text-secondary">
|
|
<input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} className={"checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "+props.className}/>
|
|
{title != null ? (
|
|
<label {...props.label} htmlFor={id ?? name ?? title} class="block font-bold px-2">
|
|
{title}
|
|
</label>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|