/* * Copyright (c) All respective contributors to the Peridot Project. All rights reserved. * Copyright (c) 2021-2022 Rocky Enterprise Software Foundation, Inc. All rights reserved. * Copyright (c) 2021-2022 Ctrl IQ, Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * 1. Redistributions of source code must retain the above copyright notice, * this list of conditions and the following disclaimer. * * 2. Redistributions in binary form must reproduce the above copyright notice, * this list of conditions and the following disclaimer in the documentation * and/or other materials provided with the distribution. * * 3. Neither the name of the copyright holder nor the names of its contributors * may be used to endorse or promote products derived from this software without * specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE * POSSIBILITY OF SUCH DAMAGE. */ import React from 'react'; export interface TextFieldProps { label: string; id: string; name?: string; placeholder?: boolean; type?: string; required?: boolean; onChange?(e: React.ChangeEvent<HTMLInputElement>): void; } export const TextField = (props: TextFieldProps) => { return ( <div className="w-full"> {!props.placeholder && ( <label htmlFor={props.id} className="block text-sm font-medium text-gray-700" > {props.label} </label> )} <div className={!props.placeholder ? 'mt-1' : undefined}> <input type={props.type || 'text'} required={props.required} name={props.name} id={props.id} className="shadow-sm focus:ring-gray-300 focus:border-gray-300 block w-full sm:text-sm border-gray-200 rounded-md text-sm leading-3" placeholder={props.placeholder ? props.label : undefined} onChange={props.onChange} /> </div> </div> ); };