feat: add a placeholder and rotate icon on open

jpedroh · Dec 27, 2023 · c4c0905 · c4c0905
1 parent 1979b45
commit c4c0905
Showing 1 changed file with 30 additions and 16 deletions.
diff --git a/modules/web/shared/ui/src/components/select/index.tsx b/modules/web/shared/ui/src/components/select/index.tsx
@@ -17,22 +17,36 @@ type Props = { label: string } & Omit<ComboBoxProps<Option>, 'children'>
 export function Select({ label, ...props }: Props) {
   return (
     <ComboBox className={'grid gap-2'} {...props}>
-      <Label>{label}</Label>
-      <div className="flex">
-        <Input className={'flex-grow'} />
-        <Button className={'!w-fit ml-[-1.714rem] border dark:border-gray-400'}>
-          ▼
-        </Button>
-      </div>
-      <Popover
-        className={
-          'max-h-[20rem] overflow-auto rounded-lg border dark:border-gray-400'
-        }
-      >
-        <ListBox<Option>>
-          {(item) => <SelectOption>{item.name}</SelectOption>}
-        </ListBox>
-      </Popover>
+      {({ isOpen }) => {
+        return (
+          <>
+            <Label>{label}</Label>
+            <div className="flex">
+              <Input className={'flex-grow'} placeholder="Select" />
+              <Button
+                className={`!w-fit ml-[-1.714rem] border dark:border-gray-400`}
+              >
+                <span
+                  className={`transition-all inline-block ${
+                    isOpen ? 'rotate-180' : ''
+                  }`}
+                >
+                  ▼
+                </span>
+              </Button>
+            </div>
+            <Popover
+              className={
+                'max-h-[20rem] overflow-auto rounded-lg border dark:border-gray-400'
+              }
+            >
+              <ListBox<Option>>
+                {(item) => <SelectOption>{item.name}</SelectOption>}
+              </ListBox>
+            </Popover>
+          </>
+        )
+      }}
     </ComboBox>
   )
 }