94 lines
3.5 KiB
JavaScript
Executable File
94 lines
3.5 KiB
JavaScript
Executable File
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { faker } from '@faker-js/faker/locale/fr';
|
|
import _ from 'lodash';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
UncontrolledDropdown,
|
|
DropdownToggle,
|
|
IconWithBadge,
|
|
Badge,
|
|
ExtendedDropdown,
|
|
ListGroup,
|
|
ListGroupItem,
|
|
Media
|
|
} from './../../components';
|
|
|
|
/*eslint-disable */
|
|
const activityFeedIcons = [
|
|
<span className="fa-stack fa-lg fa-fw d-flex mr-3">
|
|
<i className="fa fa-circle fa-fw fa-stack-2x text-success"></i>
|
|
<i className="fa fa-check fa-stack-1x fa-fw text-white"></i>
|
|
</span>,
|
|
<span className="fa-stack fa-lg fa-fw d-flex mr-3">
|
|
<i className="fa fa-circle fa-fw fa-stack-2x text-danger"></i>
|
|
<i className="fa fa-close fa-stack-1x fa-fw text-white"></i>
|
|
</span>,
|
|
<span className="fa-stack fa-lg fa-fw d-flex mr-3">
|
|
<i className="fa fa-circle fa-fw fa-stack-2x text-warning"></i>
|
|
<i className="fa fa-exclamation fa-stack-1x fa-fw text-white"></i>
|
|
</span>,
|
|
<span className="fa-stack fa-lg fa-fw d-flex mr-3">
|
|
<i className="fa fa-circle fa-fw fa-stack-2x text-primary"></i>
|
|
<i className="fa fa-info fa-stack-1x fa-fw text-white"></i>
|
|
</span>
|
|
];
|
|
/*eslint-enable */
|
|
|
|
const NavbarActivityFeed = (props) => (
|
|
<UncontrolledDropdown nav inNavbar { ...props }>
|
|
<DropdownToggle nav>
|
|
<IconWithBadge
|
|
badge={ <Badge pill color="primary">6</Badge> }
|
|
>
|
|
<i className="fa fa-bell-o fa-fw" />
|
|
</IconWithBadge>
|
|
</DropdownToggle>
|
|
<ExtendedDropdown right>
|
|
<ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
|
|
<h6 className="mb-0">Activity Feed</h6>
|
|
<Badge pill>4</Badge>
|
|
</ExtendedDropdown.Section>
|
|
|
|
<ExtendedDropdown.Section list>
|
|
<ListGroup>
|
|
{
|
|
_.times(7, (index) => (
|
|
<ListGroupItem key={ index } action>
|
|
<Media>
|
|
<Media left>
|
|
{ activityFeedIcons[index%4] }
|
|
</Media>
|
|
<Media body>
|
|
<span className="h6">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span> changed Description to "{ faker.random.words() }"
|
|
<p className="mt-2 mb-1">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
<div className="small mt-2">
|
|
{ faker.date.past().toString() }
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
))
|
|
}
|
|
</ListGroup>
|
|
</ExtendedDropdown.Section>
|
|
|
|
<ExtendedDropdown.Section className="text-center" tag={ Link} to="/apps/widgets">
|
|
See All Notifications
|
|
<i className="fa fa-angle-right fa-fw ml-2" />
|
|
</ExtendedDropdown.Section>
|
|
</ExtendedDropdown>
|
|
</UncontrolledDropdown>
|
|
);
|
|
NavbarActivityFeed.propTypes = {
|
|
className: PropTypes.string,
|
|
style: PropTypes.object
|
|
};
|
|
|
|
export { NavbarActivityFeed };
|