button and single learning

src/config/Pages.ts

@@ -25,7 +25,10 @@ export const Pages = {
     detail: "/announcement/",
   },
   criticisms: "/criticisms",
-  learning: "/learning",
+  learning: {
+    list: "/learning",
+    detail: "/learning/detail/",
+  },
   setting: "/setting",
   wallet: "/wallet",
   callback: "/wallet/callback/",

src/pages/criticisms/Add.tsx

@@ -4,7 +4,7 @@ import Input from '../../components/Input'
 import Textarea from '../../components/Textarea'
 import UploadBox from '../../components/UploadBox'
 import Button from '../../components/Button'
-import { TickSquare } from 'iconsax-react'
+import { TickCircle, TickSquare } from 'iconsax-react'
 import { useMultiUpload } from '../ticket/hooks/useTicketData'
 import { useFormik } from 'formik'
 import { CreateCriticismsTypes } from './types/CriticismsTypes'
@@ -109,11 +109,17 @@ const AddCriticisms: FC = () => {
 
                     <div className='mt-20 flex justify-end'>
                         <Button
-                            label={t('ticket.send')}
+                            className='xl:max-w-[100px]'
-                            className='max-w-[100px]'
                             onClick={() => formik.handleSubmit()}
                             isLoading={createCriticisms.isPending || multiUpload.isPending}
-                        />
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <TickCircle size={20} color='white' />
+                                <div>
+                                    {t('ticket.send')}
+                                </div>
+                            </div>
+                        </Button>
                     </div>
                 </div>
 

src/pages/financial/components/Legal.tsx

@@ -198,7 +198,7 @@ const Legal: FC = () => {
                                 <div className='mt-8 flex justify-end'>
                                     <Button
                                         disabled={isReadOnly}
-                                        className='w-fit px-7'
+                                        className='xl:w-fit xl:px-7'
                                         onClick={() => formik.handleSubmit()}
                                         isLoading={createLegalUser.isPending}
                                     >

src/pages/financial/components/Personal.tsx

@@ -230,7 +230,7 @@ const Personal: FC = () => {
 
                     <div className='mt-8 flex justify-end'>
                         <Button
-                            className='w-fit px-7'
+                            className='xl:w-fit px-7'
                             onClick={() => formik.handleSubmit()}
                             isLoading={createRealUser.isPending}
                             disabled={isReadOnly}

src/pages/learning/Detail.tsx

@@ -0,0 +1,87 @@
+import { FC } from 'react'
+import { useParams } from 'react-router-dom'
+import { useGetLearningDetail } from './hooks/useLearningData'
+import PageLoading from '../../components/PageLoading'
+import DanakLearning from '../home/components/DanakLearning'
+import { Calendar2, Clock, Element3 } from 'iconsax-react'
+import moment from 'moment-jalaali'
+
+const LearningDetail: FC = () => {
+
+    const { id } = useParams()
+    const getLearningDetail = useGetLearningDetail(id ? id : '')
+
+    return (
+        <div className='mt-4'>
+            {
+                getLearningDetail.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
+                        <div className='flex-1'>
+                            <div className='text-lg'>
+                                {
+                                    getLearningDetail.data?.data?.learning?.title
+                                }
+                            </div>
+
+                            <div className='mt-10 bg-white p-8 rounded-3xl'>
+                                <video className='w-full rounded-3xl' controls>
+                                    <source src={getLearningDetail.data?.data?.learning?.videoUrl} />
+                                </video>
+
+                                <div className='mt-7 flex justify-between'>
+                                    <div className='text-lg'>
+                                        {getLearningDetail.data?.data?.learning?.title}
+                                    </div>
+
+                                    <div className='flex max-h-5 gap-3 text-description text-xs'>
+
+                                        <div className='flex gap-2 items-center'>
+                                            <Clock
+                                                size={18}
+                                                color={'#888888'}
+                                            />
+                                            <div>
+                                                {getLearningDetail.data?.data?.learning?.videoDuration + ' دقیقه'}
+                                            </div>
+                                        </div>
+
+                                        <div className='flex gap-2 items-center border-r pr-3 border-description'>
+                                            <Element3
+                                                size={18}
+                                                color={'#888888'}
+                                            />
+                                            <div>
+                                                {getLearningDetail.data?.data?.learning?.category?.name}
+                                            </div>
+                                        </div>
+
+                                        <div className='flex gap-2 items-center border-r pr-3 border-description'>
+                                            <Calendar2
+                                                size={18}
+                                                color={'#888888'}
+                                            />
+                                            <div>
+                                                {moment(getLearningDetail.data?.data?.learning?.createdAt).format('jYYYY-jMM-jDD')}
+                                            </div>
+                                        </div>
+
+                                    </div>
+
+
+                                </div>
+                                <div className='mt-6 text-description'>
+                                    {getLearningDetail.data?.data?.learning.description}
+                                </div>
+
+                            </div>
+                        </div>
+                        <DanakLearning />
+                    </div>
+            }
+        </div>
+    )
+}
+
+export default LearningDetail

src/pages/learning/List.tsx

@@ -6,6 +6,8 @@ import { useGetLearnings } from './hooks/useLearningData'
 import PageLoading from '../../components/PageLoading'
 import { LearningItemType } from './types/LearningTypes'
 import moment from 'moment-jalaali'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const LearningList: FC = () => {
 
@@ -52,7 +54,7 @@ const LearningList: FC = () => {
                             {
                                 getLearnings.data?.data?.learnings?.map((item: LearningItemType) => {
                                     return (
-                                        <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
+                                        <Link to={Pages.learning.detail + item.id} className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                                             <img src={item.coverUrl} className='w-full rounded-[20px]' />
                                             <div className='mt-4'>
                                                 {item.title}
@@ -65,7 +67,7 @@ const LearningList: FC = () => {
                                             <div className='mt-3 text-xs text-description'>
                                                 {moment(item.createdAt).format('jYYYY/jMM/jDD')}
                                             </div>
-                                        </div>
+                                        </Link>
                                     )
                                 })
                             }

src/pages/learning/hooks/useLearningData.ts

@@ -7,3 +7,11 @@ export const useGetLearnings = (search: string) => {
     queryFn: () => api.getLearnings(search),
   });
 };
+
+export const useGetLearningDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["learning", id],
+    queryFn: () => api.getLearningDetail(id),
+    enabled: !!id,
+  });
+};

src/pages/learning/service/LearningService.ts

@@ -4,3 +4,8 @@ export const getLearnings = async (search: string) => {
   const { data } = await axios.get(`/learnings?q=${search}`);
   return data;
 };
+
+export const getLearningDetail = async (id: string) => {
+  const { data } = await axios.get(`/learnings/${id}`);
+  return data;
+};

src/pages/profile/Profile.tsx

@@ -243,7 +243,7 @@ const Profile: FC = () => {
 
                                 <div className='flex justify-end mt-5'>
                                     <Button
-                                        className='w-fit px-10'
+                                        className='xl:w-fit px-10'
                                         onClick={() => formik.handleSubmit()}
                                         isLoading={updateProfile.isPending}
                                     >

src/pages/service/MyServices.tsx

@@ -46,7 +46,7 @@ const MyServices: FC = () => {
                     </div> */}
                 </div>
 
-                <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
+                <div className='flex items-stretch flex-wrap xl:gap-6 gap-4 xl:items-center mt-8'>
 
                     {
                         getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
@@ -57,7 +57,7 @@ const MyServices: FC = () => {
                                             author: item.plan.service.author,
                                             createDate: item.plan?.service?.createDate,
                                             createdAt: item.createdAt,
-                                            description: item.plan?.service?.description,
+                                            description: item.plan?.service?.title,
                                             icon: item.plan?.service.icon,
                                             id: item.plan.service.id,
                                             isActive: item.plan.isActive,

src/pages/setting/components/ChangePassword.tsx

@@ -8,6 +8,7 @@ import * as Yup from 'yup'
 import { toast } from 'react-toastify'
 import { useChangePassword } from '../hooks/useSettingData'
 import { ErrorType } from '../../../helpers/types'
+import { TickCircle } from 'iconsax-react'
 
 const ChangePassword: FC = () => {
 
@@ -114,6 +115,21 @@ const ChangePassword: FC = () => {
                         onClick={() => formik.handleSubmit()}
                     />
                 </div>
+
+                <div className='justify-end xl:hidden flex'>
+                    <Button
+                        className='xl:w-fit px-10'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={changePassword.isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={20} color='white' />
+                            <div>
+                                {t('setting.save_change')}
+                            </div>
+                        </div>
+                    </Button>
+                </div>
             </div>
 
             <div className='h-14'></div>

src/pages/ticket/CreateTicket.tsx

@@ -5,7 +5,7 @@ import Select from '../../components/Select'
 import Textarea from '../../components/Textarea'
 import UploadBox from '../../components/UploadBox'
 import Button from '../../components/Button'
-import { TickSquare } from 'iconsax-react'
+import { TickCircle, TickSquare } from 'iconsax-react'
 import { useCreateTicket, useGetCategoriesTicket, useMultiUpload } from './hooks/useTicketData'
 import { useGetProfile } from '../profile/hooks/useProfileData'
 import PageLoading from '../../components/PageLoading'
@@ -193,11 +193,17 @@ const CreateTicket: FC = () => {
 
                             <div className='mt-8 flex justify-end'>
                                 <Button
-                                    label={t('ticket.send')}
+                                    className='xl:max-w-[100px]'
-                                    className='max-w-[100px]'
                                     onClick={() => formik.handleSubmit()}
                                     isLoading={createTicket.isPending || multiUpload.isPending}
-                                />
+                                >
+                                    <div className='flex gap-2 items-center'>
+                                        <TickCircle size={20} color='white' />
+                                        <div>
+                                            {t('ticket.send')}
+                                        </div>
+                                    </div>
+                                </Button>
                             </div>
                         </div>
 

src/pages/wallet/components/CardtoCard.tsx

@@ -99,7 +99,7 @@ const CardtoCard: FC = () => {
 
                         <div className='mt-10 flex justify-end'>
                             <Button
-                                className='w-[180px]'
+                                className='xl:w-[180px]'
                                 onClick={() => formik.handleSubmit()}
                                 isLoading={depositTransfer.isPending || upload.isPending}
                             >

src/pages/wallet/components/Online.tsx

@@ -104,7 +104,7 @@ const Online: FC = () => {
 
                 <div className='mt-10 flex justify-end'>
                     <Button
-                        className='w-[180px]'
+                        className='xl:w-[180px]'
                         onClick={handlePay}
                         isLoading={payment.isPending}
                     >

src/pages/wallet/components/Sheba.tsx

@@ -100,7 +100,7 @@ const CardtoCard: FC = () => {
 
                         <div className='mt-10 flex justify-end'>
                             <Button
-                                className='w-[180px]'
+                                className='xl:w-[180px]'
                                 onClick={() => formik.handleSubmit()}
                                 isLoading={depositTransfer.isPending || upload.isPending}
                             >

src/router/Main.tsx

@@ -27,6 +27,7 @@ import TicketDetail from '../pages/ticket/Detail'
 import Financial from '../pages/financial/Financial'
 import CallBack from '../pages/wallet/CallBack'
 import MyDiscountList from '../pages/discounts/List'
+import LearningDetail from '../pages/learning/Detail'
 
 const MainRouter: FC = () => {
     return (
@@ -50,7 +51,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
                             <Route path={Pages.announcement.detail + ':id'} element={<AnnouncementDetail />} />
                             <Route path={Pages.criticisms} element={<AddCriticisms />} />
-                            <Route path={Pages.learning} element={<LearningList />} />
+                            <Route path={Pages.learning.list} element={<LearningList />} />
+                            <Route path={Pages.learning.detail + ':id'} element={<LearningDetail />} />
                             <Route path={Pages.setting} element={<Setting />} />
                             <Route path={Pages.wallet} element={<Wallet />} />
                             <Route path={Pages.callback + ':id'} element={<CallBack />} />

src/shared/SideBar.tsx

@@ -106,7 +106,7 @@ const SideBar: FC = () => {
                             icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.learning')}
                             isActive={isActive('learning')}
-                            link={Pages.learning}
+                            link={Pages.learning.list}
                         />
                     </div>