Init

Preview: http://dashboards.webkom.co/react/airframe

app/layout/components/NavbarActivityFeed.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import faker from 'faker/locale/en_US';
+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 &quot;{ faker.random.words() }&quot;
+                                    <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 };