From 1748b08c8292951cce01b8aaba8081707c6e27aa Mon Sep 17 00:00:00 2001
From: JamesS-M <36538072+JamesS-M@users.noreply.github.com>
Date: Sat, 14 Sep 2024 10:24:39 -0300
Subject: [PATCH] give preview of select menu consistent look

---
 previewsComponents/FUIDefaultSelectMenu.jsx   |   2 +-
 previewsComponents/FUIPrimarySelectMenu.jsx   |  50 ++--
 .../FUISelectMenuWithAvatars.jsx              | 156 ++++++-----
 previewsComponents/FUISelectMenuWithIcon.jsx  | 150 +++++-----
 .../FUISelectMenuWithSearchBox.jsx            | 260 +++++++++---------
 .../FUISelectMenuWithSearchBox2.jsx           | 258 +++++++++--------
 previewsComponents/FUIStatusSelectMenu.jsx    |   2 +-
 7 files changed, 435 insertions(+), 443 deletions(-)

diff --git a/previewsComponents/FUIDefaultSelectMenu.jsx b/previewsComponents/FUIDefaultSelectMenu.jsx
index b82d9f4..ce96840 100644
--- a/previewsComponents/FUIDefaultSelectMenu.jsx
+++ b/previewsComponents/FUIDefaultSelectMenu.jsx
@@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 
 export default function FUIDefaultSelectMenu() {
   return (
-    <div className="relative w-72 max-w-full mx-auto mt-12">
+    <div className="relative w-72 max-w-full mx-auto m-6">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="absolute top-0 bottom-0 w-5 h-5 my-auto text-gray-400 right-3"
diff --git a/previewsComponents/FUIPrimarySelectMenu.jsx b/previewsComponents/FUIPrimarySelectMenu.jsx
index de6f1ac..c011243 100644
--- a/previewsComponents/FUIPrimarySelectMenu.jsx
+++ b/previewsComponents/FUIPrimarySelectMenu.jsx
@@ -56,7 +56,7 @@ const SelectItem = React.forwardRef(
 
   return (
       <Select.Root>
-        <div className="w-72 max-w-full mx-auto">
+        <div className="w-72 max-w-full mx-auto m-6">
           <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
             <Select.Value placeholder="Select your job" />
             <Select.Icon className="text-gray-400">
@@ -83,37 +83,37 @@ const SelectItem = React.forwardRef(
               className="w-[var(--radix-select-trigger-width)] mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm"
             >
               <Select.Viewport className="">
-    <SelectItem value='Software engineer'>
-      Software engineer
-    </SelectItem>
+                <SelectItem value='Software engineer'>
+                  Software engineer
+                </SelectItem>
 
-    <SelectItem value='Project manager'>
-      Project manager
-    </SelectItem>
+                <SelectItem value='Project manager'>
+                  Project manager
+                </SelectItem>
 
-    <SelectItem value='IT manager'>
-      IT manager
-    </SelectItem>
+                <SelectItem value='IT manager'>
+                  IT manager
+                </SelectItem>
 
-    <SelectItem value='UI / UX designer'>
-      UI / UX designer
-    </SelectItem>
+                <SelectItem value='UI / UX designer'>
+                  UI / UX designer
+                </SelectItem>
 
-    <SelectItem value='Full-stack engineer'>
-      Full-stack engineer
-    </SelectItem>
+                <SelectItem value='Full-stack engineer'>
+                  Full-stack engineer
+                </SelectItem>
 
-    <SelectItem value='Front-end enginner'>
-      Front-end enginner
-    </SelectItem>
+                <SelectItem value='Front-end enginner'>
+                  Front-end enginner
+                </SelectItem>
 
-    <SelectItem value='Marketing manager'>
-      Marketing manager
-    </SelectItem>
+                <SelectItem value='Marketing manager'>
+                  Marketing manager
+                </SelectItem>
 
-    <SelectItem value='embded system enginner'>
-      embded system enginner
-    </SelectItem>
+                <SelectItem value='embded system enginner'>
+                  embded system enginner
+                </SelectItem>
 
               </Select.Viewport>
             </Select.Content>
diff --git a/previewsComponents/FUISelectMenuWithAvatars.jsx b/previewsComponents/FUISelectMenuWithAvatars.jsx
index 6293e87..12467b0 100644
--- a/previewsComponents/FUISelectMenuWithAvatars.jsx
+++ b/previewsComponents/FUISelectMenuWithAvatars.jsx
@@ -76,92 +76,90 @@ const SelectItem = React.forwardRef(
 
 
   return (
-    <div className="m-6">
-      <Select.Root onValueChange={setSelectedItemIdx}>
-        <div className="w-72 max-w-full mx-auto">
-          <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
-            <Select.Value placeholder="Select a member">
-              <div className="flex items-center gap-2">
-                <img
-                  src={menuItems[selectedItemIdx].avatar}
-                  className="w-5 h-5 rounded-full"
-                />
-                <div className="flex-1 text-left flex items-center gap-x-1">
-                  {menuItems[selectedItemIdx].name}
-                  <span>{menuItems[selectedItemIdx].label}</span>
-                </div>
+    <Select.Root onValueChange={setSelectedItemIdx}>
+      <div className="w-72 max-w-full mx-auto m-6">
+        <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
+          <Select.Value placeholder="Select a member">
+            <div className="flex items-center gap-2">
+              <img
+                src={menuItems[selectedItemIdx].avatar}
+                className="w-5 h-5 rounded-full"
+              />
+              <div className="flex-1 text-left flex items-center gap-x-1">
+                {menuItems[selectedItemIdx].name}
+                <span>{menuItems[selectedItemIdx].label}</span>
               </div>
-            </Select.Value>
-            <Select.Icon className="text-gray-400">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                />
-              </svg>
-            </Select.Icon>
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content
-              position="popper"
-              avoidCollisions={false}
-              className="w-[var(--radix-select-trigger-width)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm"
+            </div>
+          </Select.Value>
+          <Select.Icon className="text-gray-400">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
             >
-              <Select.Viewport className="">
-                  <SelectItem value='0'>
-                    <img src='https://randomuser.me/api/portraits/women/79.jpg' className='w-5 h-5 rounded-full' />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Danya
-                      <span className='text-sm'>@danya</span>
-                    </div>
-                  </SelectItem>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+              />
+            </svg>
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            avoidCollisions={false}
+            className="w-[var(--radix-select-trigger-width)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm"
+          >
+            <Select.Viewport className="">
+                <SelectItem value='0'>
+                  <img src='https://randomuser.me/api/portraits/women/79.jpg' className='w-5 h-5 rounded-full' />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Danya
+                    <span className='text-sm'>@danya</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='1'>
-                    <img src='https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg' className='w-5 h-5 rounded-full' />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Osama
-                      <span className='text-sm'>@osama</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='1'>
+                  <img src='https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg' className='w-5 h-5 rounded-full' />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Osama
+                    <span className='text-sm'>@osama</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='2'>
-                    <img src='https://randomuser.me/api/portraits/men/86.jpg' className='w-5 h-5 rounded-full' />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Loyan
-                      <span className='text-sm'>@loyan</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='2'>
+                  <img src='https://randomuser.me/api/portraits/men/86.jpg' className='w-5 h-5 rounded-full' />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Loyan
+                    <span className='text-sm'>@loyan</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='3'>
-                    <img src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f' className='w-5 h-5 rounded-full' />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Carllose
-                      <span className='text-sm'>@carllose</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='3'>
+                  <img src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f' className='w-5 h-5 rounded-full' />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Carllose
+                    <span className='text-sm'>@carllose</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='4'>
-                    <img src='https://randomuser.me/api/portraits/men/46.jpg' className='w-5 h-5 rounded-full' />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Micheal
-                      <span className='text-sm'>@micheal</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='4'>
+                  <img src='https://randomuser.me/api/portraits/men/46.jpg' className='w-5 h-5 rounded-full' />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Micheal
+                    <span className='text-sm'>@micheal</span>
+                  </div>
+                </SelectItem>
 
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </div>
-      </Select.Root>
-    </div>
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </div>
+    </Select.Root>
   );
 };
         
\ No newline at end of file
diff --git a/previewsComponents/FUISelectMenuWithIcon.jsx b/previewsComponents/FUISelectMenuWithIcon.jsx
index f1438c9..89d5a38 100644
--- a/previewsComponents/FUISelectMenuWithIcon.jsx
+++ b/previewsComponents/FUISelectMenuWithIcon.jsx
@@ -93,88 +93,86 @@ const SelectItem = React.forwardRef(
   ];
 
   return (
-    <div className="m-6">
-      <Select.Root onValueChange={setSelectedItemIdx}>
-        <div className="w-72 max-w-full mx-auto">
-          <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
-            <Select.Value placeholder="Select a member">
-              <div className="flex items-center gap-2 text-gray-500">
-                <IconUser />
-                <div className="flex-1 text-left flex items-center gap-x-1 text-gray-600">
-                  {menuItems[selectedItemIdx].name}
-                  <span>{menuItems[selectedItemIdx].label}</span>
-                </div>
+    <Select.Root onValueChange={setSelectedItemIdx}>
+      <div className="w-72 max-w-full mx-auto m-6">
+        <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
+          <Select.Value placeholder="Select a member">
+            <div className="flex items-center gap-2 text-gray-500">
+              <IconUser />
+              <div className="flex-1 text-left flex items-center gap-x-1 text-gray-600">
+                {menuItems[selectedItemIdx].name}
+                <span>{menuItems[selectedItemIdx].label}</span>
               </div>
-            </Select.Value>
-            <Select.Icon className="text-gray-400">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8 9l4-4 4 4m0 6l-4 4-4-4"
-                />
-              </svg>
-            </Select.Icon>
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content
-              position="popper"
-              avoidCollisions={false}
-              className="w-[var(--radix-select-trigger-width)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm"
+            </div>
+          </Select.Value>
+          <Select.Icon className="text-gray-400">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
             >
-              <Select.Viewport className="">
-                  <SelectItem value='Danya'>
-                    <IconUser />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Danya
-                      <span className='text-sm'>@danya</span>
-                    </div>
-                  </SelectItem>
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+              />
+            </svg>
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            avoidCollisions={false}
+            className="w-[var(--radix-select-trigger-width)] max-h-64 mt-3 overflow-y-auto bg-white border rounded-lg shadow-sm text-sm"
+          >
+            <Select.Viewport className="">
+                <SelectItem value='Danya'>
+                  <IconUser />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Danya
+                    <span className='text-sm'>@danya</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='Osama'>
-                    <IconUser />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Osama
-                      <span className='text-sm'>@osama</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='Osama'>
+                  <IconUser />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Osama
+                    <span className='text-sm'>@osama</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='Loyan'>
-                    <IconUser />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Loyan
-                      <span className='text-sm'>@loyan</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='Loyan'>
+                  <IconUser />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Loyan
+                    <span className='text-sm'>@loyan</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='Carllose'>
-                    <IconUser />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Carllose
-                      <span className='text-sm'>@carllose</span>
-                    </div>
-                  </SelectItem>
+                <SelectItem value='Carllose'>
+                  <IconUser />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Carllose
+                    <span className='text-sm'>@carllose</span>
+                  </div>
+                </SelectItem>
 
-                  <SelectItem value='Micheal'>
-                    <IconUser />
-                    <div className='flex-1 text-left flex items-center gap-x-1'>
-                      Micheal
-                      <span className='text-sm'>@micheal</span>
-                    </div>
-                  </SelectItem>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </div>
-      </Select.Root>
-    </div>
+                <SelectItem value='Micheal'>
+                  <IconUser />
+                  <div className='flex-1 text-left flex items-center gap-x-1'>
+                    Micheal
+                    <span className='text-sm'>@micheal</span>
+                  </div>
+                </SelectItem>
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </div>
+    </Select.Root>
   );
 };
 
diff --git a/previewsComponents/FUISelectMenuWithSearchBox.jsx b/previewsComponents/FUISelectMenuWithSearchBox.jsx
index 9e6c466..cfd01ee 100644
--- a/previewsComponents/FUISelectMenuWithSearchBox.jsx
+++ b/previewsComponents/FUISelectMenuWithSearchBox.jsx
@@ -77,20 +77,42 @@ const SelectItem = React.forwardRef(
   };
 
   return (
-    <div className="m-6">
-      <Select.Root
-        onValueChange={setValue}
-        onOpenChange={() => setCountries(menuItems)}
-      >
-        <div className="w-72 max-w-full mx-auto">
-          <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
-            <Select.Value placeholder="Select your country">
-              {value}
-            </Select.Value>
-            <Select.Icon className="text-gray-400">
+    <Select.Root
+      onValueChange={setValue}
+      onOpenChange={() => setCountries(menuItems)}
+    >
+      <div className="w-72 max-w-full mx-auto m-6">
+        <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
+          <Select.Value placeholder="Select your country">
+            {value}
+          </Select.Value>
+          <Select.Icon className="text-gray-400">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+              />
+            </svg>
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            avoidCollisions={false}
+            className="w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm"
+          >
+            <div className="shadow flex items-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
+                className="h-6 w-6 mx-3 text-gray-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -99,127 +121,103 @@ const SelectItem = React.forwardRef(
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                 />
               </svg>
-            </Select.Icon>
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content
-              position="popper"
-              avoidCollisions={false}
-              className="w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm"
-            >
-              <div className="shadow flex items-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 mx-3 text-gray-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="Search"
-                  className="p-2 text-gray-500 w-full rounded-md outline-none"
-                  onInput={handleSearch}
-                />
-              </div>
-              <Select.Viewport className="max-h-64 mt-2 overflow-y-auto">
-                {countries.length < 1 ? (
-                  <div className="px-3 py-2 text-gray-600">Nothing found.</div>
-                ) : (
-                  ""
-                )}
-    <SelectItem value='United States of America'>
-      United States of America
-    </SelectItem>
-
-    <SelectItem value='Albania'>
-      Albania
-    </SelectItem>
-
-    <SelectItem value='Algeria'>
-      Algeria
-    </SelectItem>
-
-    <SelectItem value='Andorra'>
-      Andorra
-    </SelectItem>
-
-    <SelectItem value='Argentina'>
-      Argentina
-    </SelectItem>
-
-    <SelectItem value='Armenia'>
-      Armenia
-    </SelectItem>
-
-    <SelectItem value='Austria'>
-      Austria
-    </SelectItem>
-
-    <SelectItem value='Australia'>
-      Australia
-    </SelectItem>
-
-    <SelectItem value='Azerbaijan'>
-      Azerbaijan
-    </SelectItem>
-
-    <SelectItem value='Bahamas'>
-      Bahamas
-    </SelectItem>
-
-    <SelectItem value='Brazil'>
-      Brazil
-    </SelectItem>
-
-    <SelectItem value='Canada'>
-      Canada
-    </SelectItem>
-
-    <SelectItem value='Colombia'>
-      Colombia
-    </SelectItem>
-
-    <SelectItem value='China'>
-      China
-    </SelectItem>
-
-    <SelectItem value='Egypt'>
-      Egypt
-    </SelectItem>
-
-    <SelectItem value='France'>
-      France
-    </SelectItem>
-
-    <SelectItem value='Germany'>
-      Germany
-    </SelectItem>
-
-    <SelectItem value='India'>
-      India
-    </SelectItem>
-
-    <SelectItem value='Iraq'>
-      Iraq
-    </SelectItem>
-
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </div>
-      </Select.Root>
-    </div>
+              <input
+                type="text"
+                placeholder="Search"
+                className="p-2 text-gray-500 w-full rounded-md outline-none"
+                onInput={handleSearch}
+              />
+            </div>
+            <Select.Viewport className="max-h-64 mt-2 overflow-y-auto">
+              {countries.length < 1 ? (
+                <div className="px-3 py-2 text-gray-600">Nothing found.</div>
+              ) : (
+                ""
+              )}
+                <SelectItem value='United States of America'>
+                  United States of America
+                </SelectItem>
+
+                <SelectItem value='Albania'>
+                  Albania
+                </SelectItem>
+
+                <SelectItem value='Algeria'>
+                  Algeria
+                </SelectItem>
+
+                <SelectItem value='Andorra'>
+                  Andorra
+                </SelectItem>
+
+                <SelectItem value='Argentina'>
+                  Argentina
+                </SelectItem>
+
+                <SelectItem value='Armenia'>
+                  Armenia
+                </SelectItem>
+
+                <SelectItem value='Austria'>
+                  Austria
+                </SelectItem>
+
+                <SelectItem value='Australia'>
+                  Australia
+                </SelectItem>
+
+                <SelectItem value='Azerbaijan'>
+                  Azerbaijan
+                </SelectItem>
+
+                <SelectItem value='Bahamas'>
+                  Bahamas
+                </SelectItem>
+
+                <SelectItem value='Brazil'>
+                  Brazil
+                </SelectItem>
+
+                <SelectItem value='Canada'>
+                  Canada
+                </SelectItem>
+
+                <SelectItem value='Colombia'>
+                  Colombia
+                </SelectItem>
+
+                <SelectItem value='China'>
+                  China
+                </SelectItem>
+
+                <SelectItem value='Egypt'>
+                  Egypt
+                </SelectItem>
+
+                <SelectItem value='France'>
+                  France
+                </SelectItem>
+
+                <SelectItem value='Germany'>
+                  Germany
+                </SelectItem>
+
+                <SelectItem value='India'>
+                  India
+                </SelectItem>
+
+                <SelectItem value='Iraq'>
+                  Iraq
+                </SelectItem>
+
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </div>
+    </Select.Root>
   );
 };
         
\ No newline at end of file
diff --git a/previewsComponents/FUISelectMenuWithSearchBox2.jsx b/previewsComponents/FUISelectMenuWithSearchBox2.jsx
index 60c8414..2b4e42c 100644
--- a/previewsComponents/FUISelectMenuWithSearchBox2.jsx
+++ b/previewsComponents/FUISelectMenuWithSearchBox2.jsx
@@ -76,20 +76,42 @@ export default function FUISelectMenuWithSearchBox2() {
   };
 
   return (
-    <div className="m-6">
-      <Select.Root
-        onValueChange={setValue}
-        onOpenChange={() => setCountries(menuItems)}
-      >
-        <div className="w-72 max-w-full mx-auto">
-          <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
-            <Select.Value placeholder="Select your country">
-              {value}
-            </Select.Value>
-            <Select.Icon className="text-gray-400">
+    <Select.Root
+      onValueChange={setValue}
+      onOpenChange={() => setCountries(menuItems)}
+    >
+      <div className="w-72 max-w-full mx-auto m-6">
+        <Select.Trigger className="w-full inline-flex items-center justify-between px-3 py-2 text-sm text-gray-600 bg-white border rounded-lg shadow-sm outline-none focus:ring-offset-2 focus:ring-indigo-600 focus:ring-2">
+          <Select.Value placeholder="Select your country">
+            {value}
+          </Select.Value>
+          <Select.Icon className="text-gray-400">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+              />
+            </svg>
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content
+            position="popper"
+            avoidCollisions={false}
+            className="w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm"
+          >
+            <div className="shadow flex items-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="w-5 h-5"
+                className="h-6 w-6 mx-3 text-gray-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -98,126 +120,102 @@ export default function FUISelectMenuWithSearchBox2() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                 />
               </svg>
-            </Select.Icon>
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content
-              position="popper"
-              avoidCollisions={false}
-              className="w-[var(--radix-select-trigger-width)] overflow-hidden mt-3 bg-white border rounded-lg shadow-sm text-sm"
-            >
-              <div className="shadow flex items-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6 mx-3 text-gray-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="Search"
-                  className="p-2 text-gray-500 w-full rounded-md outline-none"
-                  onInput={handleSearch}
-                />
-              </div>
-              <Select.Viewport className="max-h-64 mt-2 overflow-y-auto">
-                {countries.length < 1 ? (
-                  <div className="px-3 py-2 text-gray-600">Nothing found.</div>
-                ) : (
-                  ""
-                )}
-    <SelectItem value='United States of America'>
-      United States of America
-    </SelectItem>
-
-    <SelectItem value='Albania'>
-      Albania
-    </SelectItem>
-
-    <SelectItem value='Algeria'>
-      Algeria
-    </SelectItem>
-
-    <SelectItem value='Andorra'>
-      Andorra
-    </SelectItem>
-
-    <SelectItem value='Argentina'>
-      Argentina
-    </SelectItem>
-
-    <SelectItem value='Armenia'>
-      Armenia
-    </SelectItem>
-
-    <SelectItem value='Austria'>
-      Austria
-    </SelectItem>
-
-    <SelectItem value='Australia'>
-      Australia
-    </SelectItem>
-
-    <SelectItem value='Azerbaijan'>
-      Azerbaijan
-    </SelectItem>
-
-    <SelectItem value='Bahamas'>
-      Bahamas
-    </SelectItem>
-
-    <SelectItem value='Brazil'>
-      Brazil
-    </SelectItem>
-
-    <SelectItem value='Canada'>
-      Canada
-    </SelectItem>
-
-    <SelectItem value='Colombia'>
-      Colombia
-    </SelectItem>
-
-    <SelectItem value='China'>
-      China
-    </SelectItem>
-
-    <SelectItem value='Egypt'>
-      Egypt
-    </SelectItem>
-
-    <SelectItem value='France'>
-      France
-    </SelectItem>
-
-    <SelectItem value='Germany'>
-      Germany
-    </SelectItem>
-
-    <SelectItem value='India'>
-      India
-    </SelectItem>
-
-    <SelectItem value='Iraq'>
-      Iraq
-    </SelectItem>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </div>
-      </Select.Root>
-    </div>
+              <input
+                type="text"
+                placeholder="Search"
+                className="p-2 text-gray-500 w-full rounded-md outline-none"
+                onInput={handleSearch}
+              />
+            </div>
+            <Select.Viewport className="max-h-64 mt-2 overflow-y-auto">
+              {countries.length < 1 ? (
+                <div className="px-3 py-2 text-gray-600">Nothing found.</div>
+              ) : (
+                ""
+              )}
+              <SelectItem value='United States of America'>
+                United States of America
+              </SelectItem>
+
+              <SelectItem value='Albania'>
+                Albania
+              </SelectItem>
+
+              <SelectItem value='Algeria'>
+                Algeria
+              </SelectItem>
+
+              <SelectItem value='Andorra'>
+                Andorra
+              </SelectItem>
+
+              <SelectItem value='Argentina'>
+                Argentina
+              </SelectItem>
+
+              <SelectItem value='Armenia'>
+                Armenia
+              </SelectItem>
+
+              <SelectItem value='Austria'>
+                Austria
+              </SelectItem>
+
+              <SelectItem value='Australia'>
+                Australia
+              </SelectItem>
+
+              <SelectItem value='Azerbaijan'>
+                Azerbaijan
+              </SelectItem>
+
+              <SelectItem value='Bahamas'>
+                Bahamas
+              </SelectItem>
+
+              <SelectItem value='Brazil'>
+                Brazil
+              </SelectItem>
+
+              <SelectItem value='Canada'>
+                Canada
+              </SelectItem>
+
+              <SelectItem value='Colombia'>
+                Colombia
+              </SelectItem>
+
+              <SelectItem value='China'>
+                China
+              </SelectItem>
+
+              <SelectItem value='Egypt'>
+                Egypt
+              </SelectItem>
+
+              <SelectItem value='France'>
+                France
+              </SelectItem>
+
+              <SelectItem value='Germany'>
+                Germany
+              </SelectItem>
+
+              <SelectItem value='India'>
+                India
+              </SelectItem>
+
+              <SelectItem value='Iraq'>
+                Iraq
+              </SelectItem>
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </div>
+    </Select.Root>
   );
 };
 
diff --git a/previewsComponents/FUIStatusSelectMenu.jsx b/previewsComponents/FUIStatusSelectMenu.jsx
index 8d1f7d4..6d15d86 100644
--- a/previewsComponents/FUIStatusSelectMenu.jsx
+++ b/previewsComponents/FUIStatusSelectMenu.jsx
@@ -36,7 +36,7 @@ export default function FUIStatusSelectMenu() {
     }, [])
 
     return (
-        <div className="relative max-w-xs px-4 mx-auto mt-12 text-base">
+        <div className="max-w-xs px-4 mx-auto m-6">
             <button ref={selectMenuRef} className="flex items-center justify-between gap-2 w-full px-3 py-2 text-gray-500 bg-white border rounded-md shadow-sm cursor-default outline-none focus:border-indigo-600"
                 aria-haspopup="true"
                 aria-expanded="true"