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"
       />
     );
   }

components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
-import CollectionSelection from "@/components/CollectionSelection";
+import CollectionListing from "@/components/CollectionListing";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -99,7 +99,7 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel>
-            <CollectionSelection links={true} />
+            <CollectionListing links={true} />
           </Disclosure.Panel>
         </Transition>
       </Disclosure>