Grouped components into folders

client/components/common/form/FormField.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/display-name */
+import { forwardRef, ReactNode } from "react"
+
+import Input from "../Input"
+
+interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+  label?: string
+  bottomElement?: ReactNode
+}
+
+const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  ({ label, bottomElement, hidden, ...inputProps }, ref) => {
+    return (
+      <div className="space-y-1">
+        <label htmlFor={inputProps.id} className="font-semibold text-sm">
+          {label}
+        </label>
+        <Input {...inputProps} ref={ref} />
+        {bottomElement}
+      </div>
+    )
+  },
+)
+
+export default FormField

client/components/common/form/SubmitButton.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx"
+import { FC } from "react"
+
+type ButtonProps = React.ComponentPropsWithoutRef<"input">
+
+const SubmitButton: FC<ButtonProps> = ({ className, ...rest }) => {
+  return (
+    <input
+      type="submit"
+      className={clsx(
+        "cursor-pointer rounded-md bg-violet-500 font-semibold py-2 text-sm",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export default SubmitButton