other services
This commit is contained in:
@@ -18,8 +18,8 @@ const MyServices: FC = () => {
|
|||||||
{t('service.my_service')}
|
{t('service.my_service')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mt-8 flex gap-6 items-center'>
|
<div className='mt-8 flex xl:gap-6 gap-4 items-center'>
|
||||||
<div className='w-[300px]'>
|
<div className='xl:w-[300px] w-full'>
|
||||||
<Input
|
<Input
|
||||||
variant='search'
|
variant='search'
|
||||||
placeholder={t('service.search')}
|
placeholder={t('service.search')}
|
||||||
@@ -27,18 +27,20 @@ const MyServices: FC = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Select
|
<div>
|
||||||
items={[
|
<Select
|
||||||
{ label: t('all'), value: 'all' },
|
items={[
|
||||||
{ label: 'Active', value: 'active' },
|
{ label: t('all'), value: 'all' },
|
||||||
{ label: 'Inactive', value: 'inactive' },
|
{ label: 'Active', value: 'active' },
|
||||||
]}
|
{ label: 'Inactive', value: 'inactive' },
|
||||||
className='max-w-[100px]'
|
]}
|
||||||
/>
|
className='max-w-[100px]'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex gap-6 items-center mt-8'>
|
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
<div className='mt-6 flex gap-1 items-center'>
|
<div className='mt-6 flex gap-1 items-center'>
|
||||||
@@ -48,7 +50,7 @@ const MyServices: FC = () => {
|
|||||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
<div className='mt-6 flex gap-1 items-center'>
|
<div className='mt-6 flex gap-1 items-center'>
|
||||||
@@ -58,7 +60,7 @@ const MyServices: FC = () => {
|
|||||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
<div className='mt-6 flex gap-1 items-center'>
|
<div className='mt-6 flex gap-1 items-center'>
|
||||||
@@ -68,7 +70,7 @@ const MyServices: FC = () => {
|
|||||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
<div className='mt-6 flex gap-1 items-center'>
|
<div className='mt-6 flex gap-1 items-center'>
|
||||||
@@ -80,7 +82,7 @@ const MyServices: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white rounded-3xl overflow-hidden relative'>
|
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||||
<img
|
<img
|
||||||
src={BannerImage}
|
src={BannerImage}
|
||||||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||||||
|
|||||||
@@ -70,11 +70,11 @@ const OtherServices: FC = () => {
|
|||||||
<TitleLine title={t('service.selected_danak')} />
|
<TitleLine title={t('service.selected_danak')} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex flex-wrap gap-6 items-center mt-8'>
|
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
<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='flex gap-2 items-center'>
|
||||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
<div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
|
||||||
<div>
|
<div className='xl:text-base text-sm'>
|
||||||
دی منو
|
دی منو
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,10 +96,10 @@ const OtherServices: FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
|
||||||
<div className='flex gap-2 items-center'>
|
<div className='flex gap-2 items-center'>
|
||||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
<div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
|
||||||
<div>
|
<div className='xl:text-base text-sm'>
|
||||||
دی منو
|
دی منو
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -121,10 +121,10 @@ const OtherServices: FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
<div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
|
||||||
<div className='flex gap-2 items-center'>
|
<div className='flex gap-2 items-center'>
|
||||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
<div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
|
||||||
<div>
|
<div className='xl:text-base text-sm'>
|
||||||
دی منو
|
دی منو
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,15 +146,16 @@ const OtherServices: FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='w-full mt-8'>
|
<div className='w-full mt-8'>
|
||||||
<TitleLine title={t('service.other_services')} />
|
<TitleLine title={t('service.other_services')} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex w-full gap-6 items-center mt-8'>
|
<div className='flex w-full gap-6 items-center'>
|
||||||
<div className='flex gap-6 items-center mt-8'>
|
<div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||||
<div className='flex-1 bg-white rounded-3xl py-4 px-6'>
|
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||||
<div className='flex justify-between items-center'>
|
<div className='flex justify-between items-center'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
@@ -169,7 +170,7 @@ const OtherServices: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className='flex-1 bg-white rounded-3xl py-4 px-6'>
|
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||||
<div className='flex justify-between items-center'>
|
<div className='flex justify-between items-center'>
|
||||||
<ServiceSection
|
<ServiceSection
|
||||||
/>
|
/>
|
||||||
@@ -188,9 +189,11 @@ const OtherServices: FC = () => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className='h-16 xl:hidden'></div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit rounded-3xl overflow-hidden relative'>
|
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||||
<img
|
<img
|
||||||
src={RobotImage}
|
src={RobotImage}
|
||||||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ const Footer: FC = () => {
|
|||||||
return (
|
return (
|
||||||
<div className='xl:hidden'>
|
<div className='xl:hidden'>
|
||||||
<div className='h-[60px] '></div>
|
<div className='h-[60px] '></div>
|
||||||
<div className='fixed bottom-2 right-4 left-4 bg-white h-[60px] rounded-2xl flex justify-between items-center px-5'>
|
<div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
|
||||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||||
<Home2
|
<Home2
|
||||||
className='size-5'
|
className='size-5'
|
||||||
color='#8C90A3'
|
color='#8C90A3'
|
||||||
@@ -19,7 +19,7 @@ const Footer: FC = () => {
|
|||||||
{t('footer.home')}
|
{t('footer.home')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||||
<Element4
|
<Element4
|
||||||
className='size-5'
|
className='size-5'
|
||||||
color='#8C90A3'
|
color='#8C90A3'
|
||||||
@@ -29,7 +29,7 @@ const Footer: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||||
<div className='bg-white p-1 rounded-full -mt-7'>
|
<div className='bg-white p-1 rounded-full -mt-7'>
|
||||||
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
|
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
|
||||||
<Element3
|
<Element3
|
||||||
@@ -42,7 +42,7 @@ const Footer: FC = () => {
|
|||||||
{t('footer.my_services')}
|
{t('footer.my_services')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||||
<NotificationStatus
|
<NotificationStatus
|
||||||
className='size-5'
|
className='size-5'
|
||||||
color='#8C90A3'
|
color='#8C90A3'
|
||||||
@@ -51,7 +51,7 @@ const Footer: FC = () => {
|
|||||||
{t('footer.announcements')}
|
{t('footer.announcements')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||||
<Messages3
|
<Messages3
|
||||||
className='size-5'
|
className='size-5'
|
||||||
color='#8C90A3'
|
color='#8C90A3'
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { Pages } from '../config/Pages'
|
import { Pages } from '../config/Pages'
|
||||||
import Notifications from '../pages/notification/Notification'
|
import Notifications from '../pages/notification/Notification'
|
||||||
import LogoImage from '../assets/images/logo.svg'
|
|
||||||
import { useSharedStore } from './store/sharedStore'
|
import { useSharedStore } from './store/sharedStore'
|
||||||
|
|
||||||
const Header: FC = () => {
|
const Header: FC = () => {
|
||||||
@@ -26,7 +25,7 @@ const Header: FC = () => {
|
|||||||
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
|
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
|
||||||
<HambergerMenu size={24} color='black' />
|
<HambergerMenu size={24} color='black' />
|
||||||
</div>
|
</div>
|
||||||
<img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' />
|
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
|
||||||
<div className='flex xl:gap-6 gap-3 items-center'>
|
<div className='flex xl:gap-6 gap-3 items-center'>
|
||||||
<Element3 color='black' className='xl:size-[18px] size-4' />
|
<Element3 color='black' className='xl:size-[18px] size-4' />
|
||||||
<Link to={Pages.wallet}>
|
<Link to={Pages.wallet}>
|
||||||
|
|||||||
Reference in New Issue
Block a user