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

notification

Browse Source
This commit is contained in:
hamid zarghami
2025-01-01 15:39:54 +03:30
parent 9f71b92a2e
commit 7a50f2d6cf
11 changed files with 635 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/notification/Notification.tsx
+113
View File
@@ -0,0 +1,113 @@
import { Notification } from 'iconsax-react'
import { FC, useState } from 'react'
import XIcon from '../../assets/images/close-circle.svg'
import { useTranslation } from 'react-i18next'
import { clx } from '../../helpers/utils'
import StatusCircle from '../../components/StatusCircle'
import { useOutsideClick } from '../../hooks/useOutSideClick'
const Notifications: FC = () => {
const { t } = useTranslation('global')
const ref = useOutsideClick(() => setShowModal(false))
const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
const [showModal, setShowModal] = useState<boolean>(false)
return (
<div ref={ref}>
<Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />
{
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='flex justify-between items-center'>
<div>
{t('notif.natification')}
</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={() => setShowModal(false)} />
</div>
</div>
<div className='mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden'>
<div onClick={() => setActiveTab('all')} className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
همه
</div>
<div onClick={() => setActiveTab('unread')} className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
خوانده نشده
</div>
<div onClick={() => setActiveTab('read')} className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
خوانده شده
</div>
</div>
<div className='mt-6 flex flex-col gap-4 text-xs'>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
</div>
)
}
export default Notifications