box services

src/components/ServiceItem.tsx

@@ -9,7 +9,8 @@ import { ItemServiceType } from '../pages/service/types/ServiecTypes'
 type Props = {
     item: ItemServiceType,
     className?: string,
-    isLinkPanel?: boolean
+    isLinkPanel?: boolean,
+    businessName?: string
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -18,13 +19,21 @@ const ServiceItem: FC<Props> = (props: Props) => {
     const { item } = props
 
     return (
-        <div className={`flex-1 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}`}>
             <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' />
                 </div>
-                <div className='xl:text-base text-sm'>
-                    {item.name}
+                <div className='flex flex-col'>
+                    <div className='xl:text-base text-sm'>
+                        {item.name}
+                    </div>
+                    {
+                        props.isLinkPanel &&
+                        <div className='text-xs text-description'>
+                            {props.businessName}
+                        </div>
+                    }
                 </div>
             </div>
             <div className='mt-4 text-xs'>
@@ -32,12 +41,17 @@ const ServiceItem: FC<Props> = (props: Props) => {
             </div>
 
             <div className='mt-4 flex-1 flex items-end'>
-                <Link to={Pages.services.detail + item.id}>
+                <Link target={props.isLinkPanel ? '_blank' : ''} to={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'
                     >
                         <div className='flex gap-2 whitespace-nowrap'>
-                            <div>{t('service.detail')}</div>
+                            {
+                                props.isLinkPanel ?
+                                    t('panel_service')
+                                    :
+                                    t('service.detail')
+                            }
                             <ArrowLeft color='black' size={16} />
                         </div>
                     </Button>