From 179c8cb4c45583c2f6c665b1dda7417863f017df Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Wed, 14 Aug 2024 22:52:02 +0700
Subject: [PATCH] Fix type error issue

---
 src/components/inputs/SelectInput.tsx     | 12 ++++++++----
 src/modules/moderator/ModeratorHeader.tsx |  7 +++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/inputs/SelectInput.tsx b/src/components/inputs/SelectInput.tsx
index bd69eed62..0f5251384 100644
--- 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
index d66365fb4..30a1b0654 100644
--- 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>
         )}
       />