feat: add input validation error

src/components/button/PrimaryButton.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-function Button({ children, className, ...rest }: Props) {
+function Button({ children, className, disabled, ...rest }: Props) {
   return (
-    <button className={`${className} cursor-pointer bg-primary w-full rounded-normal p-3 text-white font-normal text-sm`} {...rest}>
-      {children}
-    </button>
+    <div>
+      <button className={`${className} ${disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white'} transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm`} {...rest}>
+        {children}
+      </button>
+    </div>
   )
 }
 

src/components/input/InputField.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Tooltip from '../utils/Tooltip';
 
 type Props = {
     htmlFor: string;
@@ -17,12 +18,15 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
                 htmlFor={htmlFor}>
                 {labelText}
             </label>
-            <input
-                onChange={onChange}
-                className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
-                name={htmlFor}
-                {...inputProps} />
-            {children}
+
+            <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
+                <input
+                    onChange={onChange}
+                    className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
+                    name={htmlFor}
+                    {...inputProps} />
+                {children}
+            </Tooltip>
         </div>
     )
 }

src/components/utils/Tooltip.tsx

@@ -0,0 +1,49 @@
+'use client';
+import React, { ReactNode } from 'react';
+
+type Props = {
+  content: ReactNode;
+  hidden?: boolean;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+} & Omit<React.HTMLAttributes<HTMLElement>, 'id'>;
+
+const positionClasses = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+};
+
+const arrowClasses = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-t-disabled',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-disabled',
+  left: 'left-full top-1/2 -translate-y-1/2 border-l-disabled',
+  right: 'right-full top-1/2 -translate-y-1/2 border-r-disabled',
+};
+
+const Tooltip = ({
+  children,
+  content,
+  hidden = false,
+  position = 'top',
+  ...rest
+}: Props) => {
+
+  return (
+    <div className="relative flex items-center group w-full" {...rest}>
+      {children}
+      {!hidden && (
+        <div
+          className={`pointer-events-none bg-disabled text-disabled-text absolute z-10 px-3 py-2 text-xs text-muted-foreground bg-muted rounded whitespace-nowrap transition-opacity duration-150 opacity-0 group-hover:opacity-100 ${positionClasses[position]}`}
+        >
+          {content}
+          <div
+            className={`absolute w-0 h-0 border-8 border-transparent ${arrowClasses[position]}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;