mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-11-05 13:01:30 +01:00
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
|
import { forwardRef } from 'react'
|
||
|
|
|
||
|
|
interface InputProps extends React.HTMLProps<HTMLInputElement> {
|
||
|
|
label: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||
|
|
const { label, name, ...rest } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='form-group-animation'>
|
||
|
|
<input ref={ref} {...rest} id={name} name={name} />
|
||
|
|
<label htmlFor={name} className='label'>
|
||
|
|
<span className='label-content'>{label}</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style jsx>{`
|
||
|
|
.form-group-animation {
|
||
|
|
position: relative;
|
||
|
|
margin-top: 10px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.form-group-animation input {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 35px;
|
||
|
|
color: var(--color-text-1);
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.form-group-animation label {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
border-bottom: 1px solid #fff;
|
||
|
|
}
|
||
|
|
.form-group-animation label::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: -1px;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 3px solid var(--color-primary);
|
||
|
|
transform: translateX(-100%);
|
||
|
|
transition: transform 0.2s ease;
|
||
|
|
}
|
||
|
|
.label-content {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 5px;
|
||
|
|
left: 0px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
.form-group-animation input:focus + .label .label-content,
|
||
|
|
.form-group-animation input:valid + .label .label-content {
|
||
|
|
transform: translateY(-150%);
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--color-primary);
|
||
|
|
}
|
||
|
|
.form-group-animation input:focus + .label::after,
|
||
|
|
.form-group-animation input:valid + .label::after {
|
||
|
|
transform: translateX(0%);
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
})
|