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

home page

Browse Source
This commit is contained in:
hamid zarghami
2024-12-28 12:32:45 +03:30
parent 4c224236da
commit 50df161858
18 changed files with 303 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/accessbility.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

src/assets/images/banner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 KiB

src/components/TitleLine.tsx
+18
View File
@@ -0,0 +1,18 @@
import { FC } from 'react'
type Props = {
title: string,
}
const TitleLine: FC<Props> = (props: Props) => {
return (
<div className='w-full text-sm flex items-center gap-4'>
<div className='whitespace-nowrap'>{props.title}</div>
<svg style={{ width: '100%', height: 1 }} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<line x1="0" y1="0" x2="100%" y2="0" stroke="#aaa" strokeWidth="1" strokeDasharray="5 3" />
</svg>
</div>
)
}
export default TitleLine
src/config/Const.ts
+1
View File
@@ -0,0 +1 @@
export const SIDEBAR_SIZE_LEFT = 300;
src/index.css
+6
View File
@@ -62,3 +62,9 @@ textarea::placeholder {
-ms-overflow-style: none;
scrollbar-width: none;
}
.borderDashed {
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%238C90A3' stroke-width='2' stroke-dasharray='6%2C 14' stroke-dashoffset='25' stroke-linecap='square'/%3E%3C/svg%3E");
border-radius: 24px; /* تطابق با rx و ry */
overflow: hidden; /* برای رفع مشکلات برش */
}
src/langs/fa.json
+16
View File
@@ -57,5 +57,21 @@
},
"header": {
"search": "جستجو"
},
"home": {
"new": "جدید",
"study": "مطالعه",
"myservice": "سرویس های من",
"active_service": "سرویس های فعال",
"ticket": "تیکت ها",
"unread_messages": "پیام خوانده نشده دارید ",
"announcement": "اطلاعیه ها",
"unread_announcement": "اطلاعیه خوانده نشده دارید",
"learnings": "آموزش ها",
"learning": "آموزش",
"access": "دسترسی سریع",
"add_access": "دسترسی سریع تازه ایجاد کنید.",
"danak_learning": "آموزش داناک",
"see_all": "دیدن همه"
}
}
src/pages/auth/Login.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { FC } from 'react'
import LogoImage from '../../assets/images/logo.svg'
import LogoSmallImage from '../../assets/images/logo-small.svg'
import { useAuthStore } from '../store/AuthStore'
import { useAuthStore } from './store/AuthStore'
import LoginStep1 from './components/LoginStep1'
import LoginStep2 from './components/LoginStep2'
import LoginStep3 from './components/LoginStep3'
src/pages/auth/components/LoginStep1.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { LoginType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../../store/AuthStore'
import { useAuthStore } from '../store/AuthStore'
import Error from '../../../components/Error'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
src/pages/auth/components/LoginStep2.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import { LoginType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../../store/AuthStore'
import { useAuthStore } from '../store/AuthStore'
import Button from '../../../components/Button'
import OTPInput from 'react-otp-input'
import { useCountDown } from '../../../hooks/useCountDown'
src/pages/auth/components/LoginStep3.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { LoginPasswordType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../../store/AuthStore'
import { useAuthStore } from '../store/AuthStore'
import Error from '../../../components/Error'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
src/pages/store/AuthStore.ts → src/pages/auth/store/AuthStore.ts
View File
src/pages/home/Home.tsx
+98
View File
@@ -0,0 +1,98 @@
import { FC } from 'react'
import BannerImage from '../../assets/images/banner.png'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Element3, Messages3, NotificationStatus, Teacher } from 'iconsax-react'
import ItemDashboard from './components/ItemDashboard'
import TitleLine from '../../components/TitleLine'
import AccessbilityImage from '../../assets/images/accessbility.jpg'
import BoxNewAccessbility from './components/BoxNewAccessbility'
import DanakLearning from './components/DanakLearning'
const Home: FC = () => {
const { t } = useTranslation('global')
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' />
</button>
</div>
</div>
</div>
<div className='mt-8 text-sm flex gap-6 items-center'>
<ItemDashboard
title={t('home.myservice')}
icon={<Element3 size={20} color='black' />}
color='#00D16C'
count={4}
description={t('home.active_service')}
/>
<ItemDashboard
title={t('home.ticket')}
icon={<Messages3 size={20} color='black' />}
color='#FF7B00'
count={4}
description={t('home.unread_messages')}
/>
<ItemDashboard
title={t('home.announcement')}
icon={<NotificationStatus size={20} color='black' />}
color='#FF0000'
count={4}
description={t('home.unread_announcement')}
/>
<ItemDashboard
title={t('home.learnings')}
icon={<Teacher size={20} color='black' />}
color='#0047FF'
count={4}
description={t('home.learning')}
/>
</div>
<div className='w-full mt-8'>
<TitleLine title={t('home.access')} />
</div>
<div className='mt-8 flex gap-6 items-center'>
<div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
<img src={AccessbilityImage} className='w-10' />
<div className='text-xs'>
{t('home.add_access')}
</div>
</div>
<BoxNewAccessbility />
<BoxNewAccessbility />
<BoxNewAccessbility />
</div>
</div>
<DanakLearning />
</div>
)
}
export default Home
src/pages/home/components/BoxNewAccessbility.tsx
+43
View File
@@ -0,0 +1,43 @@
import { Add } from 'iconsax-react'
import { FC } from 'react'
const BoxNewAccessbility: FC = () => {
return (
<div
className="flex-1 flex justify-center items-center h-[160px]"
style={{
position: 'relative',
}}
>
<svg
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
style={{
position: 'absolute',
top: 0,
left: 0,
zIndex: -1,
borderRadius: '22px',
}}
>
<rect
width="100%"
height="100%"
fill="none"
// rx="22"
ry="22"
stroke="#8C90A3"
strokeWidth="2"
strokeDasharray="6,14"
// strokeDashoffset="25"
/>
</svg>
<div style={{ zIndex: 1 }}>
<Add size={38} color="#8C90A3" />
</div>
</div>
)
}
export default BoxNewAccessbility
src/pages/home/components/DanakLearning.tsx
+69
View File
@@ -0,0 +1,69 @@
import { FC } from 'react'
import { SIDEBAR_SIZE_LEFT } from '../../../config/Const'
import { useTranslation } from 'react-i18next'
import { ArrowLeft } from 'iconsax-react'
import CoverImage from '../../../assets/images/banner.png'
const DanakLearning: FC = () => {
const { t } = useTranslation('global')
return (
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
<div className='flex justify-between items-center'>
<div>
{t('home.danak_learning')}
</div>
<div className='flex gap-2 items-center text-[10px]'>
<div>{t('home.see_all')}</div>
<ArrowLeft size={12} color='black' />
</div>
</div>
<div className='mt-7'>
<div className='flex gap-3 mt-6'>
<div>
<img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
</div>
<div className='text-xs'>
<div className='leading-5'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='text-[10px] text-description'>
<div className='flex gap-1 mt-2'>
<div>دیزاین ,</div>
<div>۲۴ دقیقه</div>
</div>
<div className=' mt-2'>
آذر ماه 1403
</div>
</div>
</div>
</div>
<div className='flex gap-3 mt-6'>
<div>
<img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
</div>
<div className='text-xs'>
<div className='leading-5'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='text-[10px] text-description'>
<div className='flex gap-1 mt-2'>
<div>دیزاین ,</div>
<div>۲۴ دقیقه</div>
</div>
<div className=' mt-2'>
آذر ماه 1403
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default DanakLearning
src/pages/home/components/ItemDashboard.tsx
+35
View File
@@ -0,0 +1,35 @@
import { FC, ReactNode } from 'react'
type Props = {
title: string
icon: ReactNode,
color: string,
count: number,
description: string
}
const ItemDashboard: FC<Props> = (props: Props) => {
return (
<div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
{props.icon}
</div>
<div className='mt-5'>
{props.title}
</div>
<div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
<div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
<div className='flex gap-0.5'>
<div>{props.count}</div>
<div className='whitespace-nowrap'>
{props.description}
</div>
</div>
</div>
</div>
)
}
export default ItemDashboard
src/router/Main.tsx
+10
View File
@@ -1,12 +1,22 @@
import { FC } from 'react'
import SideBar from '../shared/SideBar'
import Header from '../shared/Header'
import { Route, Routes } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Home from '../pages/home/Home'
const MainRouter: FC = () => {
return (
<div className='p-4'>
<SideBar />
<Header />
<div className='flex-1 ms-[269px] mt-[66px]'>
<div className='pt-8'>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
</Routes>
</div>
</div>
</div>
)
}
src/shared/Header.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Header: FC = () => {
const { t } = useTranslation('global')
return (
<div className='fixed left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
<div className='fixed z-10 left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
<div className='min-w-[270px]'>
<Input
tailwind.config.js
+2 -1
View File
@@ -11,7 +11,8 @@ export default {
secondary: '#F4F5F9',
border: '#D0D0D0',
description: '#888888',
header: "#C3C7DD"
header: "#C3C7DD",
success: "#00BA4B"
},
borderRadius: {
'2.5': '10px'