mirror of
https://github.com/komodorio/helm-dashboard.git
synced 2026-03-21 18:58:03 +00:00
7572f00f7c
* Bump lint-staged * Check * Check * Added husky * Check * Check * Check * Check * Check * Check * Check * Check * Fix husky * Used * instead **/* in lint-staged * Bump tailwindcss and related * Added @tailwindcss/vite and removed postcss * Added lint into staged * Bump @babel/core and updated .prettierignore * Removed tailwind.config.cjs * Added ThemeInit * Added cursor-pointer to Help dropdown * Bump react-router * Removed @types/uuid and react-router-dom * Bump diff2html, prettier, @typescript-eslint/eslint-plugin, @typescript-eslint/parser * removed vite-plugin-html-config and @babel/core * removed "@eslint/eslintrc" and "@eslint/js" * Removed redundant link * Returned plugins and source to index.css * Set dark to false in tailwindcss * Fixed storybook * Fixed useGetLatestVersion with correct gcTime: 0 option * Added eslint-plugin-prettier * Removed spaces * ClustersList.tsx improved and type fixes for another files * Repository.tsx improved * Huge fix of types * Huge fix of types missed * Fixed type of SingleValue * Added cursor pointer
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
/**
|
|
*
|
|
* @file TextInput.tsx
|
|
* @description This is a single-lined text field.
|
|
* You can choose a placeholder, label,
|
|
* and whether the field is mandatory.
|
|
* @interface TextInputProps:
|
|
* - label: the label to be displayed
|
|
* - placeholder: placeholder text
|
|
* - isMandatory: adds a red star if is.
|
|
*
|
|
* @return JSX.Element
|
|
*
|
|
*/
|
|
import { JSX } from "react";
|
|
|
|
export interface TextInputProps {
|
|
label: string;
|
|
placeholder: string;
|
|
isMandatory?: boolean;
|
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export default function TextInput(props: TextInputProps): JSX.Element {
|
|
return (
|
|
<div className="mb-6">
|
|
<label className="block ml-1 mb-1 text-sm font-medium text-gray-900dark:text-white">
|
|
{props.label}
|
|
{/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/}
|
|
{props.isMandatory ? <span className="text-red-500"> *</span> : ""}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder={props.placeholder}
|
|
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
|
|
/>
|
|
</div>
|
|
);
|
|
}
|