service item disabled and other...

src/components/ServiceItem.tsx

@@ -10,7 +10,8 @@ type Props = {
     item: ItemServiceType,
     className?: string,
     isLinkPanel?: boolean,
-    businessName?: string
+    businessName?: string,
+    isDisabled?: boolean
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -19,7 +20,7 @@ const ServiceItem: FC<Props> = (props: Props) => {
     const { item } = props
 
     return (
-        <div className={`flex-1 flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className}`}>
+        <div className={`flex-1 flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
             <div className='flex gap-2 items-center'>
                 <div className='xl:size-[50px] size-10 overflow-hidden rounded-xl'>
                     <img src={item.icon} alt={item.name} className='w-full h-full' />
@@ -41,7 +42,7 @@ const ServiceItem: FC<Props> = (props: Props) => {
             </div>
 
             <div className='mt-4 flex-1 flex items-end'>
-                <Link target={props.isLinkPanel ? '_blank' : ''} to={props.isLinkPanel ? item.link : Pages.services.detail + item.id}>
+                <Link target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.id}>
                     <Button
                         className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                     >