104 lines
3.9 KiB
JavaScript
104 lines
3.9 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
CAvatar,
|
|
CBadge,
|
|
CDropdown,
|
|
CDropdownItem,
|
|
CDropdownMenu,
|
|
CDropdownToggle,
|
|
} from '@coreui/react'
|
|
import CIcon from '@coreui/icons-react'
|
|
|
|
const AppHeaderDropdownMssg = () => {
|
|
const itemsCount = 4
|
|
return (
|
|
<CDropdown variant="nav-item" direction="down">
|
|
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
|
<CIcon name="cil-envelope-open" />
|
|
<CBadge shape="rounded-pill" color="info">
|
|
{itemsCount}
|
|
</CBadge>
|
|
</CDropdownToggle>
|
|
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
<CDropdownItem header tag="div" color="light">
|
|
<strong>You have {itemsCount} messages</strong>
|
|
</CDropdownItem>
|
|
<CDropdownItem href="#">
|
|
<div className="message">
|
|
<div className="pt-3 me-3 float-start">
|
|
<CAvatar src={'avatars/7.jpg'} status="success" />
|
|
</div>
|
|
<div>
|
|
<small className="text-medium-emphasis">John Doe</small>
|
|
<small className="text-medium-emphasis float-end mt-1">Just now</small>
|
|
</div>
|
|
<div className="text-truncate font-weight-bold">
|
|
<span className="fa fa-exclamation text-danger"></span> Important message
|
|
</div>
|
|
<div className="small text-medium-emphasis text-truncate">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
incididunt...
|
|
</div>
|
|
</div>
|
|
</CDropdownItem>
|
|
|
|
<CDropdownItem href="#">
|
|
<div className="message">
|
|
<div className="pt-3 me-3 float-start">
|
|
<CAvatar src={'avatars/6.jpg'} status="warning" />
|
|
</div>
|
|
<div>
|
|
<small className="text-medium-emphasis">Jane Dovve</small>
|
|
<small className="text-medium-emphasis float-end mt-1">5 minutes ago</small>
|
|
</div>
|
|
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
<div className="small text-medium-emphasis text-truncate">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
incididunt...
|
|
</div>
|
|
</div>
|
|
</CDropdownItem>
|
|
|
|
<CDropdownItem href="#">
|
|
<div className="message">
|
|
<div className="pt-3 me-3 float-start">
|
|
<CAvatar src={'avatars/5.jpg'} status="danger" />
|
|
</div>
|
|
<div>
|
|
<small className="text-medium-emphasis">Janet Doe</small>
|
|
<small className="text-medium-emphasis float-end mt-1">1:52 PM</small>
|
|
</div>
|
|
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
<div className="small text-medium-emphasis text-truncate">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
incididunt...
|
|
</div>
|
|
</div>
|
|
</CDropdownItem>
|
|
|
|
<CDropdownItem href="#">
|
|
<div className="message">
|
|
<div className="pt-3 me-3 float-start">
|
|
<CAvatar src={'avatars/4.jpg'} status="info" />
|
|
</div>
|
|
<div>
|
|
<small className="text-medium-emphasis">Joe Doe</small>
|
|
<small className="text-medium-emphasis float-end mt-1">4:03 AM</small>
|
|
</div>
|
|
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
<div className="small text-medium-emphasis text-truncate">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
incididunt...
|
|
</div>
|
|
</div>
|
|
</CDropdownItem>
|
|
<CDropdownItem href="#" className="text-center border-top">
|
|
<strong>View all messages</strong>
|
|
</CDropdownItem>
|
|
</CDropdownMenu>
|
|
</CDropdown>
|
|
)
|
|
}
|
|
|
|
export default AppHeaderDropdownMssg
|