quik access

src/components/ServiceItem.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
-import { ArrowLeft } from 'iconsax-react'
+import { ArrowLeft, More } from 'iconsax-react'
 import Button from './Button'
 import { useTranslation } from 'react-i18next'
 import { ItemServiceType } from '../pages/service/types/ServiecTypes'
@@ -12,7 +12,8 @@ type Props = {
     isLinkPanel?: boolean,
     businessName?: string,
     isDisabled?: boolean,
-    isQuikAccess?: boolean
+    isQuikAccess?: boolean,
+    onMoreClick?: () => void,
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -21,7 +22,13 @@ 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} ${props.isDisabled ? 'opacity-50' : ''}`}>
+        <div className={`flex-1 relative 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' : ''}`}>
+            {
+                props.isQuikAccess &&
+                <div className='absolute left-4 top-4'>
+                    <More onClick={props.onMoreClick} size={14} color='black' className='rotate-90' />
+                </div>
+            }
             <div className='flex gap-2 items-center'>
                 <div className='xl:size-[50px] xl:min-w-[50px] min-w-10 size-10 overflow-hidden rounded-xl'>
                     <img src={item.icon} alt={item.name} className='w-full h-full' />