From 132ee4f88f35a85117b31c25beb20e89e37f801f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 18:59:45 +0100
Subject: [PATCH] refactor(dashboard-v2): reimplement TextInputBasic component

---
 .../TextInputBasic/TextInputBasic.js          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js b/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
index 9fa7f670..6b9531b4 100644
--- a/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
+++ b/packages/dashboard-v2/src/components/TextInputBasic/TextInputBasic.js
@@ -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>
   );