feat: update form comps. styles, add error message

Author: alexdevero

src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, FC, PropsWithChildren } from 'react'
 
 export const Button: FC<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>> = ({ children, ...props }) => (
-  <button className="bg-blue-500 text-white px-4 py-2 rounded-md" type="submit" {...props}>
+  <button className="bg-blue-500 text-white px-4 py-2 rounded-sm" type="submit" {...props}>
     {children}
   </button>
 )

src/components/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+type Props = {
+  message: string
+}
+
+export const ErrorMessage: FC<Props> = ({ message }) => <p className="text-red-500 text-sm">{message}</p>

src/components/FieldWrapper/FieldWrapper.tsx

@@ -1,7 +1,13 @@
-import type { FC, PropsWithChildren, HTMLAttributes } from 'react'
+import type { FC, PropsWithChildren } from 'react'
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
 
-export const FieldWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> = ({ children, ...props }) => (
+type Props = {
+  errorMessage?: string
+}
+
+export const FieldWrapper: FC<PropsWithChildren<Props>> = ({ children, errorMessage, ...props }) => (
   <div className="flex flex-col gap-2" {...props}>
     {children}
+    {errorMessage && <ErrorMessage message={errorMessage} />}
   </div>
 )

src/components/Form/Form.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
-import type { FC, HTMLAttributes, PropsWithChildren } from 'react'
+import type { FC, PropsWithChildren, FormHTMLAttributes } from 'react'
 
-export const Form: FC<PropsWithChildren<HTMLAttributes<HTMLFormElement>>> = ({ children, className, ...props }) => (
+export const Form: FC<PropsWithChildren<FormHTMLAttributes<HTMLFormElement>>> = ({ children, className, ...props }) => (
   <form className={clsx('flex flex-col gap-4', className)} {...props}>
     {children}
   </form>

src/components/Input/Input.tsx

@@ -2,5 +2,5 @@ import clsx from 'clsx'
 import type { FC, InputHTMLAttributes } from 'react'
 
 export const Input: FC<InputHTMLAttributes<HTMLInputElement>> = ({ className, ...props }) => (
-  <input className={clsx('border border-gray-300 rounded-md p-2', className)} {...props} />
+  <input className={clsx('border border-gray-700 bg-gray-800 rounded-sm p-1', className)} {...props} />
 )