50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import styled, { css } from 'styled-components/macro';
|
|
import tw from 'twin.macro';
|
|
|
|
export interface Props {
|
|
isLight?: boolean;
|
|
hasError?: boolean;
|
|
}
|
|
|
|
const light = css<Props>`
|
|
${tw`bg-white border-neutral-200 text-neutral-800`};
|
|
&:focus { ${tw`border-primary-400`} }
|
|
|
|
&:disabled {
|
|
${tw`bg-neutral-100 border-neutral-200`};
|
|
}
|
|
`;
|
|
|
|
const inputStyle = css<Props>`
|
|
// Reset to normal styling.
|
|
${tw`appearance-none w-full min-w-0`};
|
|
${tw`p-3 border rounded text-sm transition-all duration-150`};
|
|
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
|
|
|
|
& + .input-help {
|
|
${tw`mt-1 text-xs`};
|
|
${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
|
|
}
|
|
|
|
&:required, &:invalid {
|
|
${tw`shadow-none`};
|
|
}
|
|
|
|
&:focus {
|
|
${tw`shadow-md border-neutral-400`};
|
|
}
|
|
|
|
&:disabled {
|
|
${tw`opacity-75`};
|
|
}
|
|
|
|
${props => props.isLight && light};
|
|
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
|
|
`;
|
|
|
|
const Input = styled.input<Props>`${inputStyle}`;
|
|
const Textarea = styled.textarea<Props>`${inputStyle}`;
|
|
|
|
export { Textarea };
|
|
export default Input;
|