reactored code to use formfields and formselects

src/components/FormField.jsx

@@ -2,13 +2,16 @@ import PropTypes from "prop-types";
 import { motion } from "motion/react";
 import clsx from "clsx";
 
-function FormField({ label, children, icon }) {
+function FormField({ label, children, icon, variant }) {
   return (
-    <div className="flex">
-      <label className="mr-4 text-lg text-black dark:text-primary-dark md:w-[30%] xl:w-[20%] 2xl:w-[17%]">
+    <div className="flex items-center">
+      <label className={clsx(
+        "mr-20 text-lg text-black dark:text-primary-dark whitespace-nowrap", 
+        variant === 'long' && "sm:w-[5%]"
+      )}>
         {label}
       </label>
-      <div className="flex w-full gap-4 items-center">
+      <div className={clsx("flex w-full gap-4 items-center", variant === 'long' && 'gap-10')}>
         {children}
         {icon && (
             <motion.div 
@@ -29,7 +32,8 @@ function FormField({ label, children, icon }) {
 FormField.propTypes = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-    icon: PropTypes.object.isRequired,
+  icon: PropTypes.object,
+  variant: PropTypes.string
 };
 
 export default FormField;