LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(dashboard-v2): reimplement TextInputBasic component

This commit is contained in:
Michał Leszczyk 2022-03-15 18:59:45 +01:00
parent 7014e983a5
commit 132ee4f88f
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
View File

@ -1,18 +1,20 @@
import { nanoid } from "nanoid";
import PropTypes from "prop-types";
import { useMemo } from "react";
export const TextInputBasic = ({ label, placeholder, ...props }) => {
const id = useMemo(() => `input-${nanoid()}`, []);
/**
* Primary UI component for user interaction
*/
export const TextInputBasic = ({ label, placeholder }) => {
return (
<div className={""}>
<p className={"font-sans uppercase text-palette-300 text-inputLabel mb-textInputLabelBottom"}>{label}</p>
<div className="flex flex-col w-full gap-1">
<label className="font-sans uppercase text-palette-300 text-xs" htmlFor={id}>
{label}
</label>
<input
id={id}
placeholder={placeholder}
className={
"w-full bg-palette-100 h-textInput px-textInputBasicX focus:outline-none bg-transparent " +
"placeholder-palette-400 text-content tracking-inputPlaceholder text-textInput"
}
className="w-full py-2 px-4 bg-palette-100 rounded-sm placeholder:text-palette-200 focus:outline outline-1 outline-palette-200"
{...props}
/>
</div>
);