mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-11-15 00:23:13 +01:00
40 lines
923 B
TypeScript
40 lines
923 B
TypeScript
|
import { forwardRef } from 'react'
|
||
|
|
|
||
|
|
interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
|
||
|
|
label: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||
|
|
(props, ref) => {
|
||
|
|
const { label, name, ...rest } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='form-group'>
|
||
|
|
<label htmlFor={name}>{label}</label>
|
||
|
|
<br />
|
||
|
|
<textarea id={name} name={name} ref={ref} {...rest} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style jsx>{`
|
||
|
|
.form-group {
|
||
|
|
padding-top: 15px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.form-group textarea {
|
||
|
|
background: transparent;
|
||
|
|
color: var(--color-text);
|
||
|
|
outline: none;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
padding: 10px;
|
||
|
|
resize: vertical;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|