service
This commit is contained in:
hamid zarghami
Generated
+67
@@ -14,6 +14,7 @@
|
||||
"formik": "^2.4.6",
|
||||
"i18next": "^24.2.0",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"rc-rate": "^2.13.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-dropzone": "^14.3.5",
|
||||
@@ -23,6 +24,7 @@
|
||||
"react-otp-input": "^3.1.1",
|
||||
"react-router-dom": "^7.1.0",
|
||||
"react-toastify": "^11.0.2",
|
||||
"swiper": "^11.2.1",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"yup": "^1.6.1",
|
||||
"zustand": "^5.0.2"
|
||||
@@ -31,6 +33,7 @@
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^18.3.17",
|
||||
"@types/react-dom": "^18.3.5",
|
||||
"@types/swiper": "^5.4.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.17.0",
|
||||
@@ -1862,6 +1865,13 @@
|
||||
"@types/react": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/swiper": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/swiper/-/swiper-5.4.3.tgz",
|
||||
"integrity": "sha512-hJXpVeANf+XQXgbvmuFZdsnaSOKqOEZcaLDnHhZOJDRow+lfboatwubW+Ay9XiHobMGyEomkgpXSYRlDVn4gMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.1.tgz",
|
||||
@@ -4110,6 +4120,44 @@
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/rc-rate": {
|
||||
"version": "2.13.0",
|
||||
"resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.0.tgz",
|
||||
"integrity": "sha512-oxvx1Q5k5wD30sjN5tqAyWTvJfLNNJn7Oq3IeS4HxWfAiC4BOXMITNAsw7u/fzdtO4MS8Ki8uRLOzcnEuoQiAw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.10.1",
|
||||
"classnames": "^2.2.5",
|
||||
"rc-util": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.x"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.9.0",
|
||||
"react-dom": ">=16.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rc-util": {
|
||||
"version": "5.44.3",
|
||||
"resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.3.tgz",
|
||||
"integrity": "sha512-q6KCcOFk3rv/zD3MckhJteZxb0VjAIFuf622B7ElK4vfrZdAzs16XR5p3VTdy3+U5jfJU5ACz4QnhLSuAGe5dA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"react-is": "^18.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.9.0",
|
||||
"react-dom": ">=16.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rc-util/node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
|
||||
@@ -4673,6 +4721,25 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.2.1",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
|
||||
"integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"formik": "^2.4.6",
|
||||
"i18next": "^24.2.0",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"rc-rate": "^2.13.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-dropzone": "^14.3.5",
|
||||
@@ -25,6 +26,7 @@
|
||||
"react-otp-input": "^3.1.1",
|
||||
"react-router-dom": "^7.1.0",
|
||||
"react-toastify": "^11.0.2",
|
||||
"swiper": "^11.2.1",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"yup": "^1.6.1",
|
||||
"zustand": "^5.0.2"
|
||||
@@ -33,6 +35,7 @@
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^18.3.17",
|
||||
"@types/react-dom": "^18.3.5",
|
||||
"@types/swiper": "^5.4.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.17.0",
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import 'swiper/css'
|
||||
import 'rc-rate/assets/index.css';
|
||||
import i18next from 'i18next'
|
||||
import { I18nextProvider } from 'react-i18next'
|
||||
import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.647 0.479492C16.8265 0.521346 17.009 0.558249 17.188 0.605502C18.888 1.05554 20.0825 2.66307 19.9932 4.37501C19.8959 6.23726 18.5754 7.73093 16.7699 7.9816C15.5651 8.14901 14.5061 7.80158 13.6261 6.95236C13.4812 6.81285 13.3928 6.82095 13.2381 6.91771C11.3048 8.12591 9.36827 9.32931 7.42844 10.5279C7.30464 10.6044 7.27594 10.6688 7.32393 10.8096C7.59332 11.5806 7.59332 12.4207 7.32393 13.1917C7.27638 13.3325 7.30554 13.3964 7.42934 13.4729C9.38113 14.6793 11.3304 15.8905 13.2771 17.1065C13.4247 17.1988 13.4933 17.1682 13.6081 17.0615C14.7084 16.035 15.9931 15.706 17.4208 16.1835C18.8561 16.6637 19.7062 17.7073 19.9524 19.201C20.2866 21.2298 18.8239 23.1874 16.7946 23.4763C16.7439 23.484 16.6888 23.4763 16.6484 23.5214H15.841C15.4431 23.4282 15.0426 23.3499 14.6662 23.1748C13.8364 22.7926 13.1743 22.1195 12.8041 21.2821C12.4339 20.4447 12.3812 19.5004 12.6558 18.6268C12.7151 18.4386 12.6935 18.3491 12.5146 18.2388C10.5795 17.0486 8.64954 15.85 6.72467 14.643C6.5901 14.5593 6.52282 14.5665 6.40665 14.6759C5.32699 15.6948 4.05804 16.0377 2.64331 15.589C1.22859 15.1403 0.365577 14.1385 0.0704313 12.6813C-0.354794 10.5806 1.19764 8.48339 3.31928 8.25837C4.52498 8.13056 5.55844 8.49689 6.42414 9.33846C6.52596 9.43747 6.5901 9.44062 6.70673 9.36771C8.65911 8.14901 10.614 6.93391 12.5715 5.72242C12.6967 5.64456 12.72 5.582 12.6742 5.43754C11.9471 3.15496 13.3596 0.890825 15.7356 0.515945C15.7713 0.506836 15.8061 0.494639 15.8397 0.479492L16.647 0.479492ZM16.2321 22.1411C16.7034 22.1421 17.1645 22.0029 17.557 21.7412C17.9496 21.4795 18.256 21.1069 18.4377 20.6706C18.6193 20.2342 18.6681 19.7537 18.5777 19.2896C18.4874 18.8255 18.262 18.3986 17.9301 18.0629C17.5981 17.7273 17.1745 17.4978 16.7126 17.4035C16.2508 17.3092 15.7714 17.3543 15.3351 17.5331C14.8988 17.7119 14.5251 18.0164 14.2611 18.4082C13.9972 18.8 13.8549 19.2614 13.8521 19.7343C13.8501 20.0493 13.9102 20.3617 14.0288 20.6533C14.1475 20.945 14.3224 21.2103 14.5436 21.434C14.7647 21.6576 15.0278 21.8352 15.3175 21.9566C15.6073 22.0779 15.9181 22.1406 16.2321 22.1411ZM16.2299 1.8593C15.7587 1.86064 15.2984 2.002 14.9072 2.26554C14.516 2.52908 14.2113 2.90299 14.0317 3.34008C13.8521 3.77716 13.8056 4.25784 13.898 4.72144C13.9904 5.18504 14.2176 5.61078 14.551 5.94493C14.8844 6.27908 15.3089 6.50666 15.7711 6.59895C16.2332 6.69124 16.7123 6.6441 17.1477 6.46348C17.5832 6.28287 17.9556 5.97687 18.2179 5.58411C18.4802 5.19135 18.6207 4.72943 18.6216 4.25665C18.6232 3.94118 18.5624 3.62853 18.4427 3.3368C18.3231 3.04506 18.1469 2.78004 17.9245 2.55708C17.7021 2.33411 17.4377 2.15763 17.1469 2.03786C16.856 1.91808 16.5443 1.85739 16.2299 1.8593ZM3.76783 9.60938C3.2971 9.60992 2.83707 9.75031 2.44578 10.0129C2.05448 10.2754 1.74944 10.6483 1.56914 11.0846C1.38884 11.5209 1.34136 12.0009 1.43267 12.4643C1.52399 12.9276 1.75002 13.3534 2.08225 13.688C2.41448 14.0226 2.83803 14.2509 3.29947 14.3443C3.76091 14.4376 4.23957 14.3918 4.67508 14.2125C5.11058 14.0333 5.48342 13.7286 5.74656 13.337C6.0097 12.9454 6.15136 12.4844 6.15366 12.0121C6.15598 11.6967 6.09591 11.384 5.97695 11.092C5.85798 10.8 5.68247 10.5346 5.46058 10.3111C5.23869 10.0877 4.97483 9.91059 4.68427 9.79013C4.3937 9.66968 4.08221 9.60824 3.76783 9.60938Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -0,0 +1,20 @@
|
||||
import { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
isActive: boolean,
|
||||
value: 'year' | '3month' | 'month',
|
||||
onChange: (value: 'year' | '3month' | 'month') => void
|
||||
}
|
||||
|
||||
const Radio: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<div onClick={() => props.onChange(props.value)} className='size-4 cursor-pointer rounded-full bg-[#EAEDF5] flex justify-center items-center'>
|
||||
{
|
||||
props.isActive &&
|
||||
<div className='size-2 bg-black rounded-full'></div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Radio
|
||||
@@ -0,0 +1,31 @@
|
||||
import { FC } from 'react'
|
||||
import Radio from './Radio'
|
||||
|
||||
|
||||
type Props = {
|
||||
items: {
|
||||
label: string
|
||||
value: 'year' | '3month' | 'month'
|
||||
}[]
|
||||
selected: string
|
||||
onChange: (value: 'year' | '3month' | 'month') => void
|
||||
}
|
||||
|
||||
const RadioGroup: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<div className='flex gap-5 items-center text-xs'>
|
||||
{
|
||||
props.items.map((item, index) => (
|
||||
<div key={index} className='flex gap-2 items-center'>
|
||||
<Radio value={item.value} onChange={props.onChange} isActive={item.value === props.selected} />
|
||||
<div className='mt-0.5'>
|
||||
{item.label}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RadioGroup
|
||||
@@ -8,6 +8,7 @@ export const Pages = {
|
||||
services: {
|
||||
mine: "/services",
|
||||
other: "/other-service",
|
||||
detail: "/services/detail/",
|
||||
},
|
||||
transactions: "/transactions",
|
||||
receipts: {
|
||||
|
||||
@@ -114,3 +114,7 @@ tbody tr {
|
||||
|
||||
backdrop-filter: blur(44px);
|
||||
}
|
||||
|
||||
.rc-rate-star {
|
||||
margin-right: 3px !important; /* فاصله بین ستارهها */
|
||||
}
|
||||
|
||||
+21
-1
@@ -83,7 +83,27 @@
|
||||
"active_menu": "منو فعال",
|
||||
"selected_danak": "انتخاب داناک",
|
||||
"buy": "خرید",
|
||||
"other_services": "سایر سرویس ها"
|
||||
"other_services": "سایر سرویس ها",
|
||||
"year": "سالانه",
|
||||
"month3": "۳ ماهه",
|
||||
"month": "ماهیانه",
|
||||
"company_develop": "شرکت توسعه دهنده",
|
||||
"company_danak": "شرکت داناک",
|
||||
"user_count": "تعداد کاربران",
|
||||
"year_make": "سال ساخت",
|
||||
"lang_app": "زبان نرم افزار",
|
||||
"persian": "فارسی",
|
||||
"score": "امتیاز",
|
||||
"compelete_description": "توضیحات تکمیلی",
|
||||
"submit_comment": "ثبت نظر",
|
||||
"hint_comment": "شما پس از خرید این سرویس میتوانید نظر خود را به ثبت برسانید.",
|
||||
"fullName": "نام و نام خانوادگی",
|
||||
"enter_your_name": "نام خود را واردکنید",
|
||||
"title": "عنوان",
|
||||
"enter_title_comment": "عنوان نظر خود را وارد کنید",
|
||||
"your_comment": "نظر شما",
|
||||
"write_your_comment": "نظر خود را راجع به این سرویس بنویسید",
|
||||
"users_comments": "نظرات کاربران"
|
||||
},
|
||||
"footer": {
|
||||
"home": "صفحه اصلی",
|
||||
|
||||
@@ -19,7 +19,7 @@ const Notifications: FC = () => {
|
||||
|
||||
{
|
||||
showModal && (
|
||||
<div className='h-[calc(100%-110px)] p-6 z-50 w-[300px] left-7 top-[90px] overflow-y-auto rounded-3xl fixed modalGlass3 '>
|
||||
<div className='xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 '>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('notif.natification')}
|
||||
|
||||
@@ -0,0 +1,214 @@
|
||||
import { FC } from 'react'
|
||||
import RobotImage from '../../assets/images/robot.jpeg'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import Rate from 'rc-rate'
|
||||
import ServiceImages from './components/ServiceImages'
|
||||
import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import AvatarImage from '../../assets/images/Avatar.png'
|
||||
import ServiceHeader from './components/ServiceHeader'
|
||||
|
||||
const DetailService: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
|
||||
<div className='flex-1'>
|
||||
|
||||
<ServiceHeader />
|
||||
<div className='mt-8 flex justify-between items-center gap-8'>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.company_develop')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{t('service.company_danak')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.user_count')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
+۵۰۰
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.year_make')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
۱۴۰۰
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.lang_app')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{t('service.persian')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.score')}
|
||||
</div>
|
||||
<div className='mt-3 dltr flex gap-1 text-sm'>
|
||||
<Rate
|
||||
count={5}
|
||||
style={{ fontSize: 15 }}
|
||||
value={4}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ServiceImages />
|
||||
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl'>
|
||||
<div>
|
||||
{t('service.compelete_description')}
|
||||
</div>
|
||||
<p className='text-[11px] mt-4 leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-8 items-start'>
|
||||
<div className='bg-white p-6 rounded-3xl w-[360px]'>
|
||||
<div>
|
||||
{t('service.submit_comment')}
|
||||
</div>
|
||||
<div className='text-xs mt-4'>
|
||||
{t('service.hint_comment')}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 text-description text-sm'>
|
||||
<div>
|
||||
{t('service.score')}
|
||||
</div>
|
||||
<div className='mt-2 dltr flex justify-end'>
|
||||
<Rate
|
||||
count={5}
|
||||
style={{ fontSize: 22 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.fullName')}
|
||||
placeholder={t('service.enter_your_name')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.title')}
|
||||
placeholder={t('service.enter_title_comment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label={t('service.your_comment')}
|
||||
placeholder={t('service.write_your_comment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Button
|
||||
label={t('service.submit_comment')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white p-6 rounded-3xl'>
|
||||
<div className='text-sm'>
|
||||
{t('service.users_comments')}
|
||||
</div>
|
||||
|
||||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||||
<div className='text-description text-xs'>
|
||||
فروغ براتی
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex justify-between'>
|
||||
<div className='text-sm max-w-[70%] truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||||
</div>
|
||||
<div className='text-xs text-description'>
|
||||
۳ روز پیش
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-2'>
|
||||
<Rate
|
||||
disabled
|
||||
value={5}
|
||||
count={5}
|
||||
style={{ fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[11px] leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||||
<div className='text-description text-xs'>
|
||||
فروغ براتی
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex justify-between'>
|
||||
<div className='text-sm max-w-[70%] truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||||
</div>
|
||||
<div className='text-xs text-description'>
|
||||
۳ روز پیش
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-2'>
|
||||
<Rate
|
||||
disabled
|
||||
value={5}
|
||||
count={5}
|
||||
style={{ fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[11px] leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<img
|
||||
src={RobotImage}
|
||||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
|
||||
<div className='max-w-[80%] text-sm leading-6 text-white'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailService
|
||||
@@ -6,6 +6,8 @@ import Select from '../../components/Select'
|
||||
import ServiceSection from '../../components/ServiceSection'
|
||||
import StatusCircle from '../../components/StatusCircle'
|
||||
import BannerImage from '../../assets/images/banner.png'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const MyServices: FC = () => {
|
||||
|
||||
@@ -40,16 +42,18 @@ const MyServices: FC = () => {
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
<div className='mt-6 flex gap-1 items-center'>
|
||||
<StatusCircle
|
||||
color='#00BA4B'
|
||||
<Link to={Pages.services.detail + '1'}>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||
<div className='mt-6 flex gap-1 items-center'>
|
||||
<StatusCircle
|
||||
color='#00BA4B'
|
||||
/>
|
||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
|
||||
@@ -149,13 +149,13 @@ const OtherServices: FC = () => {
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-8'>
|
||||
<div className='w-full xl:-mt-7 mt-8'>
|
||||
<TitleLine title={t('service.other_services')} />
|
||||
</div>
|
||||
|
||||
<div className='flex w-full gap-6 items-center'>
|
||||
<div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<ServiceSection
|
||||
/>
|
||||
@@ -170,7 +170,7 @@ const OtherServices: FC = () => {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<ServiceSection
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { FC, useState } from 'react'
|
||||
import RadioGroup from '../../../components/RadioGroup'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ShareIcon from '../../../assets/images/share.svg'
|
||||
import Button from '../../../components/Button'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
|
||||
const ServiceHeader: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
|
||||
|
||||
return (
|
||||
<div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
|
||||
<div className='flex gap-8'>
|
||||
<div className='size-[70px] bg-blue-400 rounded-xl'></div>
|
||||
<div>
|
||||
<div>
|
||||
دی منو
|
||||
</div>
|
||||
<div className='text-xs mt-3 text-[#4E505A]'>
|
||||
منوی رستوران
|
||||
</div>
|
||||
<p className='text-description mt-1 text-[11px]'>
|
||||
دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
|
||||
</p>
|
||||
<div className='flex gap-5 mt-5'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('service.year'),
|
||||
value: 'year'
|
||||
},
|
||||
{
|
||||
label: t('service.month3'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('service.month'),
|
||||
value: 'month'
|
||||
}
|
||||
]}
|
||||
onChange={setPlanSelected}
|
||||
selected={planSelected}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col justify-between items-end'>
|
||||
<div className='size-9 bg-description rounded-xl flex justify-center items-center'>
|
||||
<img src={ShareIcon} className='w-4' />
|
||||
</div>
|
||||
<div className='flex gap-4 items-center'>
|
||||
<div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
|
||||
<Button
|
||||
className='bg-description text-xs h-8 bg-opacity-20 text-black px-4'
|
||||
>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<div>
|
||||
{t('service.buy')}
|
||||
</div>
|
||||
<ArrowLeft className='size-4' color='black' />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServiceHeader
|
||||
@@ -0,0 +1,44 @@
|
||||
import { FC } from 'react'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import AppImage from '../../../assets/images/appimage.png'
|
||||
|
||||
const SWIPER_SLIDE_STYLE = {
|
||||
overflow: 'visible !important',
|
||||
// width: 220,
|
||||
}
|
||||
|
||||
const ServiceImages: FC = () => {
|
||||
return (
|
||||
<div className='w-full mt-8'>
|
||||
<Swiper
|
||||
className='w-full'
|
||||
spaceBetween={20} // فاصله پیشفرض بین اسلایدها
|
||||
slidesPerView='auto'
|
||||
>
|
||||
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServiceImages
|
||||
@@ -52,7 +52,7 @@ const Wallet: FC = () => {
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white py-10 px-5 h-fit rounded-3xl'>
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm'>
|
||||
{t('ticket.title_hint')}
|
||||
</div>
|
||||
|
||||
@@ -68,7 +68,7 @@ const Online: FC = () => {
|
||||
|
||||
<div className='mt-6 flex gap-4'>
|
||||
<div onClick={() => setBankSelected(1)} className={clx(
|
||||
'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border w-[240px]',
|
||||
'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
|
||||
bankSelected === 1 && 'border-black'
|
||||
)}>
|
||||
<img src={SamanImage} className='w-10' />
|
||||
@@ -82,7 +82,7 @@ const Online: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setBankSelected(2)} className={clx(
|
||||
'h-16 rounded-xl cursor-pointer flex gap-4 items-center px-4 border border-border w-[240px]',
|
||||
'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
|
||||
bankSelected === 2 && 'border-black'
|
||||
)}>
|
||||
<img src={SamanImage} className='w-10' />
|
||||
|
||||
@@ -20,6 +20,7 @@ import Profile from '../pages/profile/Profile'
|
||||
import OtherServices from '../pages/service/OtherServices'
|
||||
import Footer from '../shared/Footer'
|
||||
import AnnouncementDetail from '../pages/annoncement/Detail'
|
||||
import DetailService from '../pages/service/DetailService'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
return (
|
||||
@@ -33,6 +34,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.dashboard} element={<Home />} />
|
||||
<Route path={Pages.services.mine} element={<MyServices />} />
|
||||
<Route path={Pages.services.other} element={<OtherServices />} />
|
||||
<Route path={Pages.services.detail + ':id'} element={<DetailService />} />
|
||||
<Route path={Pages.ticket.list} element={<TicketList />} />
|
||||
<Route path={Pages.ticket.create} element={<CreateTicket />} />
|
||||
<Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
|
||||
|
||||
Reference in New Issue
Block a user