Fix type error issue

dappforce · Aug 14, 2024 · 179c8cb · 179c8cb
1 parent 9e74554
commit 179c8cb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/inputs/SelectInput.tsx b/src/components/inputs/SelectInput.tsx
@@ -1,13 +1,14 @@
 import { cx, interactionRingStyles } from '@/utils/class-names'
 import { Listbox, Transition } from '@headlessui/react'
 import Image, { ImageProps } from 'next/image'
-import React, { Fragment, isValidElement } from 'react'
+import { Fragment, ReactNode, isValidElement } from 'react'
 import { IoIosArrowDown } from 'react-icons/io'
 
 export type ListItem<AdditionalData = {}> = {
   id: string
   icon?: ImageProps['src'] | JSX.Element
-  label: string | React.ReactNode
+  label: string
+  customLabel?: ReactNode
   disabledItem?: boolean | string
 } & AdditionalData
 
@@ -76,7 +77,10 @@ export default function SelectInput<AdditionalData = {}>({
                       />
                     ))}
                   <span className='block truncate'>
-                    {selected?.label ?? placeholder ?? ''}
+                    {selected?.customLabel ??
+                      selected?.label ??
+                      placeholder ??
+                      ''}
                   </span>
                 </span>
                 {!disabled && (
@@ -179,7 +183,7 @@ function SelectListItem<AdditionalData>({
                     ['text-gray-500']: item.disabledItem,
                   })}
                 >
-                  {item.label}
+                  {item.customLabel ?? item.label}
                 </span>
               </div>
               {item.disabledItem && (

diff --git a/src/modules/moderator/ModeratorHeader.tsx b/src/modules/moderator/ModeratorHeader.tsx
@@ -72,7 +72,8 @@ function ModeratorFilter() {
   moderators?.forEach((address) => {
     options.push({
       id: address,
-      label: <Name address={address} withProfileModal={false} clipText />,
+      label: address,
+      customLabel: <Name address={address} withProfileModal={false} clipText />,
       icon: (
         <AddressAvatar
           address={address}
@@ -103,7 +104,9 @@ function ModeratorFilter() {
         renderItem={(item) => (
           <div className='flex cursor-pointer items-center gap-2.5 text-base'>
             {isValidElement(item.icon) ? item.icon : null}
-            <span className='line-clamp-1'>{item.label}</span>
+            <span className='line-clamp-1'>
+              {item.customLabel ?? item.label}
+            </span>
           </div>
         )}
       />