pixel perfect search

src/shared/components/Search.tsx

@@ -6,6 +6,7 @@ import { ServiceType } from '../../pages/service/types/ServiecTypes'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useOutsideClick } from '../../hooks/useOutSideClick'
+import { clx } from '../../helpers/utils'
 
 const Search: FC = () => {
 
@@ -40,9 +41,12 @@ const Search: FC = () => {
                 showSearch &&
                 <div ref={ref} className='absolute shadow bg-white top-[100%] rounded-xl right-0 w-[270px] p-4 flex flex-col gap-4 overflow-y-auto max-h-screen'>
                     {
-                        data?.data?.services?.map((item: ServiceType) => {
+                        data?.data?.services?.map((item: ServiceType, index: number) => {
                             return (
-                                <Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className='flex gap-3 items-center border-b pb-4'>
+                                <Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className={clx(
+                                    'flex gap-3 items-center border-b pb-4',
+                                    data?.data?.services?.length === index + 1 && 'border-b-0 pb-0'
+                                )}>
                                     <img src={item.icon} className='size-8 rounded-lg' />
                                     <div className='text-[13px]'>{item.name}</div>
                                 </Link>