danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile and fix scroll and slider

Browse Source
This commit is contained in:
hamid zarghami
2025-01-06 12:11:14 +03:30
parent 7a50f2d6cf
commit 650791e71a
12 changed files with 519 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/avatar_image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

src/components/Select.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const Select: FC<Props> = (props: Props) => {
</label>
}
<select {...props} className={clx(
'w-full text-black block border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
'w-full text-black block border border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
props.className,
props.label && 'mt-1'
)}>
src/components/Textarea.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const Textarea: FC<Props> = (props: Props) => {
</label>
<textarea
className='border border-border w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
className='border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
{...props}
>
src/index.css
+3
View File
@@ -72,6 +72,9 @@ tbody tr {
.dltr {
direction: ltr;
}
.drtl {
direction: rtl;
}
.otp div {
width: 100%;
}
src/langs/fa.json
+20 -2
View File
@@ -229,6 +229,24 @@
"natification": "اعلان ها"
},
"profile": {
"account_user": "حساب کاربری"
}
"account_user": "حساب کاربری",
"image_profile": "تصویر حساب کاربری",
"image_profile_desc": "تصویر خود را در حساب کاربری قرار دهید.",
"upload_image": "آپلود تصویر",
"format_image": "فرمت های jpg, png,jpeg.حداکثر ۱مگابایت",
"info_account": "اطلاعات حساب",
"auth_after_change_info": "در صورت تغییر اطلاعات حساب باید مجددا احراز هویت انجام شود.",
"username": "نام کاربری",
"phone_call": "شماره تماس",
"personal_information": "اطلاعات شخصی",
"enter_carefully_your_information": "اطلاعت شخصی خود را با دقت وارد کنید.",
"date_of_birth": "تاریخ تولد",
"national_code": "کد ملی",
"address": "آدرس",
"address_live": "آدرس محل سکونت خود را با دقت وارد کنید",
"province": "استان",
"city": "شهر",
"postal_code": "کد پستی"
},
"email": "ایمیل"
}
src/pages/home/Home.tsx
+47 -20
View File
@@ -7,6 +7,8 @@ import TitleLine from '../../components/TitleLine'
import AccessbilityImage from '../../assets/images/accessbility.jpg'
import BoxNewAccessbility from './components/BoxNewAccessbility'
import DanakLearning from './components/DanakLearning'
import { Carousel } from "@material-tailwind/react";
const Home: FC = () => {
@@ -15,29 +17,54 @@ const Home: FC = () => {
return (
<div className='w-full flex gap-6'>
<div className='flex-1'>
<div className='relative'>
<img src={BannerImage} className='w-full rounded-3xl' />
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
{t('home.new')}
</button>
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
<div>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</div>
<div className='mt-3 text-border text-xs'>
۸ دقیقه مطالعه
</div>
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
<div>
{t('home.study')}
</div>
<ArrowLeft size={14} color='white' />
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
<div className='relative drtl'>
<img src={BannerImage} className='w-full rounded-3xl' />
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
{t('home.new')}
</button>
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
<div>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</div>
<div className='mt-3 text-border text-xs'>
۸ دقیقه مطالعه
</div>
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
<div>
{t('home.study')}
</div>
<ArrowLeft size={14} color='white' />
</button>
</div>
</div>
</div>
</div>
<div className='relative drtl'>
<img src={BannerImage} className='w-full rounded-3xl' />
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
{t('home.new')}
</button>
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
<div>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</div>
<div className='mt-3 text-border text-xs'>
۸ دقیقه مطالعه
</div>
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
<div>
{t('home.study')}
</div>
<ArrowLeft size={14} color='white' />
</button>
</div>
</div>
</div>
</Carousel>
<div className='mt-8 text-sm flex gap-6 items-center'>
<ItemDashboard
src/pages/profile/Profile.tsx
+158 -3
View File
@@ -1,19 +1,174 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import AvatarImage from '../../assets/images/avatar_image.png'
import Button from '../../components/Button'
import { DocumentUpload, Edit } from 'iconsax-react'
import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
const Profile: FC = () => {
const { t } = useTranslation('global')
return (
<div className='mt-4'>
<div className='mt-4 '>
<div>
{t('profile.account_user')}
</div>
<div className='bg-white rounded-3xl p-6 mt-8'>
<div className='mt-10 flex items-center'>
<div className='bg-white rounded-3xl p-6 mt-8 text-sm'>
<div className='mt-10 flex items-center border-b pb-7'>
<div className='flex-1'>
<div>
{t('profile.image_profile')}
</div>
<div className='text-description text-xs mt-2'>
{t('profile.image_profile_desc')}
</div>
</div>
<div className='flex-1 flex gap-6'>
<img src={AvatarImage} className='size-20 rounded-full object-cover' />
<div>
<Button
className='w-[160px]'
>
<div className='flex items-center gap-3'>
<DocumentUpload color='white' size={18} />
<div>{t('profile.upload_image')}</div>
</div>
</Button>
<p className='mt-3 text-description'>
{t('profile.format_image')}
</p>
</div>
</div>
</div>
<div className='mt-8 flex border-b pb-7'>
<div className='flex-1'>
<div>
{t('profile.info_account')}
</div>
<div className='text-description text-xs mt-2'>
{t('profile.auth_after_change_info')}
</div>
</div>
<div className='flex-1 '>
<div className='flex items-end gap-6'>
<Input
label={t('profile.username')}
value={'mehrdad'}
readOnly
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<Edit size={18} color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
</div>
<div className='flex items-end gap-6 mt-7'>
<Input
label={t('email')}
value={'info@example.com'}
readOnly
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<Edit size={18} color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
</div>
<div className='flex items-end gap-6 mt-7'>
<Input
label={t('profile.phone_call')}
value={'۰۹۱۲۹۲۸۳۳۹۵'}
readOnly
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<Edit size={18} color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
</div>
</div>
</div>
<div className='mt-8 flex border-b pb-7'>
<div className='flex-1'>
<div>
{t('profile.personal_information')}
</div>
<div className='text-description text-xs mt-2'>
{t('profile.enter_carefully_your_information')}
</div>
</div>
<div className='flex-1'>
<DatePickerComponent
label={t('profile.date_of_birth')}
onChange={() => { }}
placeholder=''
defaulValue='1400-01-01'
/>
<div className='mt-7'>
<Input
label={t('profile.national_code')}
value={'۰۰۱۲۳۴۵۳۴۴'}
/>
</div>
</div>
</div>
<div className='mt-8 flex'>
<div className='flex-1'>
<div>
{t('profile.address')}
</div>
<div className='text-description text-xs mt-2'>
{t('profile.address_live')}
</div>
</div>
<div className='flex-1'>
<div className='rowTwoInput'>
<Select
label={t('profile.province')}
items={[
{
label: 'تهران',
value: 'tehran'
}
]}
className='bg-white border'
/>
<Select
label={t('profile.city')}
items={[
{
label: 'تهران',
value: 'tehran'
}
]}
/>
</div>
<div className='mt-7'>
<Input
label={t('profile.postal_code')}
value={'۱۲۳۴۵۶۷۸'}
/>
</div>
<div className='mt-7'>
<Textarea
label={t('profile.address')}
value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
/>
</div>
</div>
</div>
</div>
src/router/Main.tsx
+19 -17
View File
@@ -24,23 +24,25 @@ const MainRouter: FC = () => {
<SideBar />
<Header />
<div className='flex-1 ms-[269px] mt-[81px]'>
<div className=' overflow-auto h-[calc(100vh-113px)] '>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
<Route path={Pages.services.mine} element={<MyServices />} />
<Route path={Pages.ticket.list} element={<TicketList />} />
<Route path={Pages.ticket.create} element={<CreateTicket />} />
<Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
<Route path={Pages.transactions} element={<TransactionList />} />
<Route path={Pages.receipts.index} element={<ReceiptsList />} />
<Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
<Route path={Pages.announcement} element={<AnnouncementtList />} />
<Route path={Pages.criticisms} element={<AddCriticisms />} />
<Route path={Pages.learning} element={<LearningList />} />
<Route path={Pages.setting} element={<Setting />} />
<Route path={Pages.wallet} element={<Wallet />} />
<Route path={Pages.profile} element={<Profile />} />
</Routes>
<div className={`overflow-auto sticky w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
<div>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
<Route path={Pages.services.mine} element={<MyServices />} />
<Route path={Pages.ticket.list} element={<TicketList />} />
<Route path={Pages.ticket.create} element={<CreateTicket />} />
<Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
<Route path={Pages.transactions} element={<TransactionList />} />
<Route path={Pages.receipts.index} element={<ReceiptsList />} />
<Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
<Route path={Pages.announcement} element={<AnnouncementtList />} />
<Route path={Pages.criticisms} element={<AddCriticisms />} />
<Route path={Pages.learning} element={<LearningList />} />
<Route path={Pages.setting} element={<Setting />} />
<Route path={Pages.wallet} element={<Wallet />} />
<Route path={Pages.profile} element={<Profile />} />
</Routes>
</div>
</div>
</div>
</div>
src/shared/Header.tsx
+3 -1
View File
@@ -28,7 +28,9 @@ const Header: FC = () => {
<Notifications />
<div className='flex gap-2 items-center'>
<div className='size-7 rounded-full bg-description overflow-hidden'>
<img src={AvatarImage} className='size-full object-cover' />
<Link to={Pages.profile}>
<img src={AvatarImage} className='size-full object-cover' />
</Link>
</div>
<div className='flex gap-1 items-center'>
<div className='text-xs'>مهرداد مظفری</div>