final touch

components/InputSelect/CollectionSelection.tsx

@@ -10,11 +10,11 @@ type Props = {
   onChange: any;
   showDefaultValue?: boolean;
   defaultValue?:
-  | {
-    label: string;
-    value?: number;
-  }
-  | undefined;
+    | {
+        label: string;
+        value?: number;
+      }
+    | undefined;
   creatable?: boolean;
 };
 
@@ -44,7 +44,13 @@ export default function CollectionSelection({
 
   useEffect(() => {
     const formatedCollections = collections.map((e) => {
-      return { value: e.id, label: e.name, ownerId: e.ownerId, count: e._count, parentId: e.parentId };
+      return {
+        value: e.id,
+        label: e.name,
+        ownerId: e.ownerId,
+        count: e._count,
+        parentId: e.parentId,
+      };
     });
 
     setOptions(formatedCollections);
@@ -63,26 +69,22 @@ export default function CollectionSelection({
 
     // Have the top level parent at beginning
     return parentNames.reverse();
-  }
+  };
 
   const customOption = ({ data, innerProps }: any) => {
     return (
       <div
         {...innerProps}
-        className='px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-primary/20 cursor-pointer'
+        className="px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-neutral-content cursor-pointer"
       >
         <div className="flex w-full justify-between items-center">
-          <span>
-            {data.label}
-          </span>
-          <span>
-            {data.count?.links}
-          </span>
+          <span>{data.label}</span>
+          <span className="text-sm text-neutral">{data.count?.links}</span>
         </div>
         <div className="text-xs text-gray-600 dark:text-gray-300">
           {getParentNames(data?.parentId).length > 0 ? (
             <>
-              {getParentNames(data.parentId).join(' > ')} {'>'} {data.label}
+              {getParentNames(data.parentId).join(" > ")} {">"} {data.label}
             </>
           ) : (
             data.label
@@ -105,7 +107,7 @@ export default function CollectionSelection({
         components={{
           Option: customOption,
         }}
-      // menuPosition="fixed"
+        // menuPosition="fixed"
       />
     );
   } else {
@@ -118,7 +120,10 @@ export default function CollectionSelection({
         options={options}
         styles={styles}
         defaultValue={showDefaultValue ? defaultValue : null}
-      // menuPosition="fixed"
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
       />
     );
   }