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

modal new fast access

Browse Source
This commit is contained in:
hamid zarghami
2024-12-28 16:47:09 +03:30
parent 50df161858
commit 44d739c061
10 changed files with 275 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/close-circle.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15L15 5" stroke="#8C90A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 15L5 5" stroke="#8C90A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

src/components/DefaulModal.tsx
+56
View File
@@ -0,0 +1,56 @@
import { FC, Fragment, ReactNode, useEffect } from 'react'
import HeaderModal from './HeaderModal'
interface Props {
open: boolean,
close: () => void,
children: ReactNode,
isHeader?: boolean,
title_header?: string,
width?: number
}
const DefaulModal: FC<Props> = (props: Props) => {
useEffect(() => {
if (props.open) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = 'auto'
}
}, [props.open])
return (
<Fragment>
{
props.open && (
<Fragment>
<div style={{ maxWidth: props.width }} className='justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none max-w-xl mx-auto'>
<div className='relative h-full flex items-center sm:h-auto w-full my-6 p-2'>
<div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none'>
{
props.isHeader && props.title_header &&
<div className='pb-6 border-b border-white border-opacity-20'>
<HeaderModal close={props.close} label={props.title_header} />
</div>
}
{props.children}
</div>
</div>
</div>
<div onClick={props.close} className='fixed modalGlass inset-0 z-50 '></div>
</Fragment>
)
}
</Fragment>
)
}
export default DefaulModal
src/components/HeaderModal.tsx
+21
View File
@@ -0,0 +1,21 @@
import { FC } from 'react'
import XIcon from '../assets/images/close-circle.svg'
type Props = {
label: string,
close: () => void,
}
const HeaderModal: FC<Props> = (props: Props) => {
return (
<div className='flex justify-between items-center'>
<div className='text-sm'>{props.label}</div>
<div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
<img src={XIcon} alt='close' className='w-4 h-4' onClick={props.close} />
</div>
</div>
)
}
export default HeaderModal
src/components/Input.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const Input: FC<Props> = (props: Props) => {
const [showPassword, setShowPassword] = useState<boolean>(false)
const inputClass = clx(
'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
props.readOnly && 'bg-gray-100',
props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
props.className
src/components/Select.tsx
+44
View File
@@ -0,0 +1,44 @@
import { FC, SelectHTMLAttributes } from 'react'
export type ItemsSelectType = {
value: string,
label: string,
}
type Props = {
className?: string,
items: ItemsSelectType[],
error_text?: string,
placeholder?: string,
} & SelectHTMLAttributes<HTMLSelectElement>
const Select: FC<Props> = (props: Props) => {
return (
<div className='w-full relative'>
<select {...props} className={`w-full text-black block px-2.5 h-10 text-sm rounded-2.5 bg-gray ${props.className}`}>
{
props.placeholder &&
<option value="" disabled selected>{props.placeholder}</option>
}
{
props.items.map((item) => {
return (
<option key={item.value} value={item.value}>
{item.label}
</option>
)
})
}
</select>
{
props.error_text && props.error_text !== '' ?
<div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
{props.error_text}
</div>
: null
}
</div>
)
}
export default Select
src/index.css
+13
View File
@@ -68,3 +68,16 @@ textarea::placeholder {
border-radius: 24px; /* تطابق با rx و ry */
overflow: hidden; /* برای رفع مشکلات برش */
}
.modalGlass {
background: rgba(0, 0, 0, 0.436);
background-blend-mode: multiply;
backdrop-filter: blur(7px);
}
.modalGlass2 {
background: rgba(255, 255, 255, 0.502);
background-blend-mode: multiply;
/* backdrop-filter: blur(5px); */
}
src/langs/fa.json
+4 -2
View File
@@ -72,6 +72,8 @@
"access": "دسترسی سریع",
"add_access": "دسترسی سریع تازه ایجاد کنید.",
"danak_learning": "آموزش داناک",
"see_all": "دیدن همه"
}
"see_all": "دیدن همه",
"create_new_access": "ایجاد دسترسی سریع"
},
"all": "همه"
}
src/pages/home/components/BoxNewAccessbility.tsx
+122 -29
View File
@@ -1,42 +1,135 @@
import { Add } from 'iconsax-react'
import { FC } from 'react'
import { FC, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import Select from '../../../components/Select'
const BoxNewAccessbility: FC = () => {
const [open, setOpen] = useState<boolean>(false)
const { t } = useTranslation('global')
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"
<>
<div
onClick={() => setOpen(true)}
className="flex-1 flex justify-center items-center h-[160px]"
style={{
position: 'absolute',
top: 0,
left: 0,
zIndex: -1,
borderRadius: '22px',
position: 'relative',
}}
>
<rect
<svg
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" />
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>
</div>
<DefaulModal
open={open}
close={() => setOpen(false)}
isHeader={true}
title_header={t('home.create_new_access')}
>
<div className='mt-6'>
<div className='flex items-center gap-6'>
<div className='min-w-[210px]'>
<Input
variant='search'
className='bg-opacity-25 bg-white'
/>
</div>
<Select
items={[
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
]}
placeholder={t('all')}
className='bg-opacity-25 bg-white w-[100px]'
/>
</div>
<div className='mt-6 flex flex-wrap gap-6'>
<div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'>
<div className='size-10 rounded-xl bg-red-300'></div>
<div>
<div className='text-sm'>
دی منو
</div>
<div className='text-xs text-description'>
منو رستوران
</div>
</div>
</div>
<div>
{/* <input type='checkbox' /> */}
</div>
</div>
<div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'>
<div className='size-10 rounded-xl bg-blue-300'></div>
<div>
<div className='text-sm'>
دی منو
</div>
<div className='text-xs text-description'>
منو رستوران
</div>
</div>
</div>
<div>
{/* <input type='checkbox' /> */}
</div>
</div>
<div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'>
<div className='size-10 rounded-xl bg-green-300'></div>
<div>
<div className='text-sm'>
دی منو
</div>
<div className='text-xs text-description'>
منو رستوران
</div>
</div>
</div>
<div>
{/* <input type='checkbox' /> */}
</div>
</div>
<div className='flex-1 min-w-[40%]'></div>
</div>
</div>
</DefaulModal>
</>
)
}
src/pages/home/components/DanakLearning.tsx
+7 -29
View File
@@ -21,43 +21,21 @@ const DanakLearning: FC = () => {
</div>
<div className='mt-7'>
<div className='flex gap-3 mt-6'>
<div className='flex gap-3'>
<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>
<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 className='flex gap-1 mt-2'>
<div>دیزاین ,</div>
<div>۲۴ دقیقه</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>
آذر ماه 1403
</div>
</div>
</div>
src/router/Main.tsx
+3 -3
View File
@@ -7,11 +7,11 @@ import Home from '../pages/home/Home'
const MainRouter: FC = () => {
return (
<div className='p-4'>
<div className='p-4 overflow-hidden'>
<SideBar />
<Header />
<div className='flex-1 ms-[269px] mt-[66px]'>
<div className='pt-8'>
<div className='flex-1 ms-[269px] mt-[81px]'>
<div className=' overflow-auto h-[calc(100vh-113px)] '>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
</Routes>