upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,153 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {
|
||||
defaultAlerts,
|
||||
defaultLogs,
|
||||
KTIcon,
|
||||
toAbsoluteUrl,
|
||||
useIllustrationsPath,
|
||||
} from '../../../helpers'
|
||||
|
||||
const HeaderNotificationsMenu: FC = () => (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column w-350px w-lg-375px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div
|
||||
className='d-flex flex-column bgi-no-repeat rounded-top'
|
||||
style={{backgroundImage: `url('${toAbsoluteUrl('media/misc/menu-header-bg.jpg')}')`}}
|
||||
>
|
||||
<h3 className='text-white fw-bold px-9 mt-10 mb-6'>
|
||||
Notifications <span className='fs-8 opacity-75 ps-3'>24 reports</span>
|
||||
</h3>
|
||||
|
||||
<ul className='nav nav-line-tabs nav-line-tabs-2x nav-stretch fw-bold px-9'>
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_1'
|
||||
>
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4 active'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_2'
|
||||
>
|
||||
Updates
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_3'
|
||||
>
|
||||
Logs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='tab-content'>
|
||||
<div className='tab-pane fade' id='kt_topbar_notifications_1' role='tabpanel'>
|
||||
<div className='scroll-y mh-325px my-5 px-8'>
|
||||
{defaultAlerts.map((alert, index) => (
|
||||
<div key={`alert${index}`} className='d-flex flex-stack py-4'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='symbol symbol-35px me-4'>
|
||||
<span className={clsx('symbol-label', `bg-light-${alert.state}`)}>
|
||||
{' '}
|
||||
<KTIcon iconName={alert.icon} className={`fs-2 text-${alert.state}`} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='mb-0 me-2'>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bolder'>
|
||||
{alert.title}
|
||||
</a>
|
||||
<div className='text-gray-500 fs-7'>{alert.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className='badge badge-light fs-8'>{alert.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='py-3 text-center border-top'>
|
||||
<Link
|
||||
to='/crafted/pages/profile'
|
||||
className='btn btn-color-gray-600 btn-active-color-primary'
|
||||
>
|
||||
View All <KTIcon iconName='arrow-right' className='fs-5' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='tab-pane fade show active' id='kt_topbar_notifications_2' role='tabpanel'>
|
||||
<div className='d-flex flex-column px-9'>
|
||||
<div className='pt-10 pb-0'>
|
||||
<h3 className='text-gray-900 text-center fw-bolder'>Get Pro Access</h3>
|
||||
|
||||
<div className='text-center text-gray-600 fw-bold pt-1'>
|
||||
Outlines keep you honest. They stoping you from amazing poorly about drive
|
||||
</div>
|
||||
|
||||
<div className='text-center mt-5 mb-9'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-primary px-6'
|
||||
data-bs-toggle='modal'
|
||||
data-bs-target='#kt_modal_upgrade_plan'
|
||||
>
|
||||
Upgrade
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='text-center px-4'>
|
||||
<img className='mw-100 mh-200px' alt='metronic' src={useIllustrationsPath('1.png')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='tab-pane fade' id='kt_topbar_notifications_3' role='tabpanel'>
|
||||
<div className='scroll-y mh-325px my-5 px-8'>
|
||||
{defaultLogs.map((log, index) => (
|
||||
<div key={`log${index}`} className='d-flex flex-stack py-4'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
<span className={clsx('w-70px badge', `badge-light-${log.state}`, 'me-4')}>
|
||||
{log.code}
|
||||
</span>
|
||||
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold'>
|
||||
{log.message}
|
||||
</a>
|
||||
|
||||
<span className='badge badge-light fs-8'>{log.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='py-3 text-center border-top'>
|
||||
<Link
|
||||
to='/crafted/pages/profile'
|
||||
className='btn btn-color-gray-600 btn-active-color-primary'
|
||||
>
|
||||
View All <KTIcon iconName='arrow-right' className='fs-5' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {HeaderNotificationsMenu}
|
||||
@@ -0,0 +1,135 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useAuth} from '../../../../app/modules/auth'
|
||||
import {Languages} from './Languages'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const HeaderUserMenu: FC = () => {
|
||||
const {currentUser, logout} = useAuth()
|
||||
return (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content d-flex align-items-center px-3'>
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img alt='Logo' src={toAbsoluteUrl('media/avatars/300-3.jpg')} />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='fw-bolder d-flex align-items-center fs-5'>
|
||||
{currentUser?.first_name} {currentUser?.first_name}
|
||||
<span className='badge badge-light-success fw-bolder fs-8 px-2 py-1 ms-2'>Pro</span>
|
||||
</div>
|
||||
<a href='#' className='fw-bold text-muted text-hover-primary fs-7'>
|
||||
{currentUser?.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<Link to={'/crafted/pages/profile'} className='menu-link px-5'>
|
||||
My Profile
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-text'>My Projects</span>
|
||||
<span className='menu-badge'>
|
||||
<span className='badge badge-light-danger badge-circle fw-bolder fs-7'>3</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='menu-item px-5'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='left-start'
|
||||
data-kt-menu-flip='bottom'
|
||||
>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-title'>My Subscription</span>
|
||||
<span className='menu-arrow'></span>
|
||||
</a>
|
||||
|
||||
<div className='menu-sub menu-sub-dropdown w-175px py-4'>
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Referrals
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Billing
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Payments
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link d-flex flex-stack px-5'>
|
||||
Statements
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='View your statements'
|
||||
></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content px-3'>
|
||||
<label className='form-check form-switch form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input w-30px h-20px'
|
||||
type='checkbox'
|
||||
value='1'
|
||||
defaultChecked={true}
|
||||
name='notifications'
|
||||
/>
|
||||
<span className='form-check-label text-muted fs-7'>Notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
My Statements
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<Languages />
|
||||
|
||||
<div className='menu-item px-5 my-1'>
|
||||
<Link to='/crafted/account/settings' className='menu-link px-5'>
|
||||
Account Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a onClick={logout} className='menu-link px-5'>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {HeaderUserMenu}
|
||||
@@ -0,0 +1,89 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {FC} from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
import {useLang, setLanguage} from '../../../i18n/Metronici18n'
|
||||
|
||||
const languages = [
|
||||
{
|
||||
lang: 'en',
|
||||
name: 'English',
|
||||
flag: toAbsoluteUrl('media/flags/united-states.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'zh',
|
||||
name: 'Mandarin',
|
||||
flag: toAbsoluteUrl('media/flags/china.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'es',
|
||||
name: 'Spanish',
|
||||
flag: toAbsoluteUrl('media/flags/spain.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'ja',
|
||||
name: 'Japanese',
|
||||
flag: toAbsoluteUrl('media/flags/japan.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'de',
|
||||
name: 'German',
|
||||
flag: toAbsoluteUrl('media/flags/germany.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'fr',
|
||||
name: 'French',
|
||||
flag: toAbsoluteUrl('media/flags/france.svg'),
|
||||
},
|
||||
]
|
||||
|
||||
const Languages: FC = () => {
|
||||
const lang = useLang()
|
||||
const currentLanguage = languages.find((x) => x.lang === lang)
|
||||
return (
|
||||
<div
|
||||
className='menu-item px-5'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='left-start'
|
||||
data-kt-menu-flip='bottom'
|
||||
>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-title position-relative'>
|
||||
Language
|
||||
<span className='fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0'>
|
||||
{currentLanguage?.name}{' '}
|
||||
<img
|
||||
className='w-15px h-15px rounded-1 ms-2'
|
||||
src={currentLanguage?.flag}
|
||||
alt='metronic'
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className='menu-sub menu-sub-dropdown w-175px py-4'>
|
||||
{languages.map((l) => (
|
||||
<div
|
||||
className='menu-item px-3'
|
||||
key={l.lang}
|
||||
onClick={() => {
|
||||
setLanguage(l.lang)
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('menu-link d-flex px-5', {active: l.lang === currentLanguage?.lang})}
|
||||
>
|
||||
<span className='symbol symbol-20px me-4'>
|
||||
<img className='rounded-1' src={l.flag} alt='metronic' />
|
||||
</span>
|
||||
{l.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Languages}
|
||||
Reference in New Issue
Block a user