other services

2025-02-12 13:17:19 +03:30
parent 71d3d5c393
commit 8b7abf5dd4
9 changed files with 316 additions and 199 deletions
@@ -0,0 +1,51 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import { ArrowLeft } from 'iconsax-react'
+import Button from './Button'
+import { useTranslation } from 'react-i18next'
+import { ItemServiceType } from '../pages/service/types/ServiecTypes'
+
+type Props = {
+    item: ItemServiceType
+}
+
+const ServiceItem: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const { item } = props
+
+    return (
+        <div className='flex-1 min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
+            <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>
+            </div>
+            <div className='mt-4 text-xs'>
+                <div className='font-extralight'>{item.description} </div>
+                <p dangerouslySetInnerHTML={{ __html: item.metaDescription }} className='text-description mt-2'>
+
+                </p>
+            </div>
+
+            <div className='mt-4'>
+                <Link to={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'>
+                            <div>{t('service.buy')}</div>
+                            <ArrowLeft color='black' size={16} />
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default ServiceItem