create ui components

frontend/components/ui/TextInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { TextInputProps } from '@/app/types'
+import Tooltip from './Tooltip'
 
 const TextInput = ({
   value,
@@ -10,16 +11,17 @@ const TextInput = ({
   type = 'text',
   className = '',
   maxLength,
+  tooltip,
 }: TextInputProps) => {
   return (
     <div className={className}>
       {label && (
-        <label
-          className="block my-2 font-medium text-sm text-gray-500"
-          htmlFor={name}
-        >
-          {label}
-        </label>
+        <div className="flex items-center gap-2 my-2">
+          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
+            {label}
+          </label>
+          {tooltip && <Tooltip content={tooltip} />}
+        </div>
       )}
       <input
         type={type}
@@ -28,7 +30,7 @@ const TextInput = ({
         placeholder={placeholder}
         value={value || ''}
         onChange={handleChange}
-        className="w-full px-4 py-4 border bg-gray-100 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
+        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
         autoComplete={name}
         maxLength={maxLength}
       />