feat: add basic form components

Author: alexdevero

src/components/FieldWrapper/FieldWrapper.tsx

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

src/components/Form/Form.tsx

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

src/components/Input/Input.tsx

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

src/components/Label/Label.tsx

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react'
+
+export const Label: FC<PropsWithChildren<HTMLAttributes<HTMLLabelElement>>> = ({ children, ...props }) => (
+  <label className="text-sm font-medium" {...props}>
+    {children}
+  </label>
+)

src/components/Textarea/Textarea.tsx

@@ -0,0 +1,6 @@
+import clsx from 'clsx'
+import type { FC, HTMLAttributes } from 'react'
+
+export const Textarea: FC<HTMLAttributes<HTMLTextAreaElement>> = ({ className, ...props }) => (
+  <textarea className={clsx('border border-gray-300 rounded-md p-2', className)} {...props} />
+)