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"