103 lines
3.8 KiB
JavaScript
Executable File
103 lines
3.8 KiB
JavaScript
Executable File
import React from 'react';
|
|
import faker from 'faker/locale/en_US';
|
|
import _ from 'lodash';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
Avatar,
|
|
UncontrolledDropdown,
|
|
DropdownToggle,
|
|
IconWithBadge,
|
|
Badge,
|
|
ExtendedDropdown,
|
|
ListGroup,
|
|
ListGroupItem,
|
|
Media,
|
|
InputGroup,
|
|
Input,
|
|
InputGroupAddon,
|
|
Button
|
|
} from './../../components';
|
|
|
|
const messagesColors = [
|
|
"text-success",
|
|
"text-danger",
|
|
"text-warning"
|
|
];
|
|
|
|
const NavbarMessages = (props) => (
|
|
<UncontrolledDropdown nav inNavbar { ...props }>
|
|
<DropdownToggle nav>
|
|
<IconWithBadge
|
|
badge={ <Badge pill color="secondary">6</Badge> }
|
|
>
|
|
<i className="fa fa-envelope-o fa-fw" />
|
|
</IconWithBadge>
|
|
</DropdownToggle>
|
|
<ExtendedDropdown right>
|
|
<ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
|
|
<h6 className="mb-0">Messages</h6>
|
|
<ExtendedDropdown.Link to="/apps/new-email">
|
|
<i className="fa fa-pencil" />
|
|
</ExtendedDropdown.Link>
|
|
</ExtendedDropdown.Section>
|
|
<ExtendedDropdown.Section>
|
|
<InputGroup>
|
|
<Input placeholder="Search Messages..." />
|
|
<InputGroupAddon addonType="append">
|
|
<Button color="secondary" outline>
|
|
<i className="fa fa-search" />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</ExtendedDropdown.Section>
|
|
|
|
<ExtendedDropdown.Section list>
|
|
<ListGroup>
|
|
{
|
|
_.times(3, (index) => (
|
|
<ListGroupItem tag={ ExtendedDropdown.Link } to="/apps/email-details" key={ index } action>
|
|
<Media>
|
|
<Media left>
|
|
<Avatar.Image
|
|
src={ faker.image.avatar() }
|
|
className='mr-4'
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="d-flex justify-content-start">
|
|
<i
|
|
className={`fa fa-circle small ${messagesColors[index]} mr-2 d-flex align-items-center`}
|
|
/>
|
|
<span className="h6 pb-0 mb-0 d-flex align-items-center">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
|
|
<span className="ml-1 small">(23)</span>
|
|
<span className="ml-auto small">Now</span>
|
|
</span>
|
|
<p className="mt-2 mb-1">
|
|
{ faker.lorem.sentences() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
))
|
|
}
|
|
</ListGroup>
|
|
</ExtendedDropdown.Section>
|
|
|
|
<ExtendedDropdown.Section className="text-center" tag={ ExtendedDropdown.Link } to="/apps/inbox">
|
|
View All
|
|
<i className="fa fa-angle-right fa-fw ml-2" />
|
|
</ExtendedDropdown.Section>
|
|
</ExtendedDropdown>
|
|
</UncontrolledDropdown>
|
|
);
|
|
NavbarMessages.propTypes = {
|
|
className: PropTypes.string,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
export { NavbarMessages };
|