Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/layout/components/NavbarMessages.js Executable file
View File

@@ -0,0 +1,102 @@
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 };