Current Path : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/input-label.tsx |
/**
* Copyright 2022 Design Barn Inc.
*/
import * as React from 'react';
import styled from 'styled-components';
import { color } from '../assets/colors';
import { Label } from './Label';
interface IInputProps {
className?: string;
disabled?: boolean;
label?: string;
max?: string;
min?: string;
onChange: (color: string) => void;
placeholder?: string;
type?: string;
value?: string;
}
export const Input = styled.input`
display: block;
width: 100%;
height: 35px;
padding: 0.375rem 0.75rem;
line-height: 1.5;
background-color: ${color.white};
background-clip: padding-box;
appearance: none;
border-radius: 0.25rem;
border: 1px solid #757575;
`;
export const InputControl = styled.div`
width: 100%;
margin-bottom: 10px;
label {
padding-bottom: 8px;
}
`;
export const InputLabel: React.FC<IInputProps> = ({
className,
disabled,
label,
onChange,
placeholder,
type,
value,
...rest
}: IInputProps) => {
return (
<InputControl className={className}>
<Label>{label}</Label>
<Input
type={type}
placeholder={placeholder}
value={value}
disabled={disabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => onChange(event.target.value)}
{...rest}
/>
</InputControl>
);
};