From e44774f1cdb038cf4be80326c7ab62d0dfd572da Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 15:21:14 +0700
Subject: [PATCH] Refactor DualOptionSelector layout in BusinessForm component

---
 src/components/BusinessForm.tsx | 115 +++++++++++++++++---------------
 1 file changed, 61 insertions(+), 54 deletions(-)

diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index d66c790..989ad75 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -222,25 +222,28 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <DualOptionSelector
-                      name="isInUS"
-                      label={
-                        <>Is your company incorporated in the United States?</>
-                      }
-                      choice1="Yes"
-                      choice2="No"
-                      handleFunction={(selectedValues: string) => {
-                        // setIsInUS;
-                        field.onChange(selectedValues);
-                      }}
-                      description={
-                        <>
-                          Only companies that are incorporated or formed in the
-                          US are eligible to raise via Reg CF.
-                        </>
-                      }
-                      value={field.value}
-                    />
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isInUS"
+                        label={
+                          <>
+                            Is your company incorporated in the United States?
+                          </>
+                        }
+                        choice1="Yes"
+                        choice2="No"
+                        handleFunction={(selectedValues: string) => {
+                          // setIsInUS;
+                          field.onChange(selectedValues);
+                        }}
+                        description={<></>}
+                        value={field.value}
+                      />
+                      <span className="text-[12px] text-neutral-500 self-center">
+                        Only companies that are incorporated or formed in the US
+                        are eligible to raise via Reg CF.
+                      </span>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -254,25 +257,27 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <DualOptionSelector
-                      name="isForSale"
-                      value={field.value}
-                      label={
-                        <>Is your product available (for sale) in market?</>
-                      }
-                      choice1="Yes"
-                      choice2="No"
-                      handleFunction={(selectedValues: string) => {
-                        // setIsForSale;
-                        field.onChange(selectedValues);
-                      }}
-                      description={
-                        <>
-                          Only check this box if customers can access, use, or
-                          buy your product today.
-                        </>
-                      }
-                    />
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isForSale"
+                        value={field.value}
+                        label={
+                          <>Is your product available (for sale) in market?</>
+                        }
+                        choice1="Yes"
+                        choice2="No"
+                        handleFunction={(selectedValues: string) => {
+                          // setIsForSale;
+                          field.onChange(selectedValues);
+                        }}
+                        description={
+                          <>
+                            Only check this box if customers can access, use, or
+                            buy your product today.
+                          </>
+                        }
+                      />
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -286,22 +291,24 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <DualOptionSelector
-                      name="isGenerating"
-                      label={<>Is your company generating revenue?</>}
-                      choice1="Yes"
-                      choice2="No"
-                      value={field.value}
-                      handleFunction={(selectedValues: string) => {
-                        field.onChange(selectedValues);
-                      }}
-                      description={
-                        <>
-                          Only check this box if your company is making money.
-                          Please elaborate on revenue below.
-                        </>
-                      }
-                    />
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isGenerating"
+                        label={<>Is your company generating revenue?</>}
+                        choice1="Yes"
+                        choice2="No"
+                        value={field.value}
+                        handleFunction={(selectedValues: string) => {
+                          field.onChange(selectedValues);
+                        }}
+                        description={
+                          <>
+                            Only check this box if your company is making money.
+                            Please elaborate on revenue below.
+                          </>
+                        }
+                      />
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>