Init

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

app/routes/components/Dropdowns/Activity.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import faker from 'faker/locale/en_US';
+import { 
+    Media, 
+} from './../../../components';
+
+const Activity = (props) => (
+    <React.Fragment>
+        <Media>
+            <Media left>
+                <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+                    <i className={ `fa fa-fw fa-stack-2x fa-stack-2x text-${ props.iconColorBelow } fa-${ props.iconBelow }` }></i>
+                    <i className={ `fa fa-stack-1x fa-fw text-${ props.iconColor } fa-${ props.icon }` }></i>
+                </span>
+            </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>
+    </React.Fragment>
+
+)
+Activity.propTypes = {
+    iconColorBelow: PropTypes.node,
+    iconBelow: PropTypes.node,
+    iconColor: PropTypes.node,
+    icon: PropTypes.node
+};
+Activity.defaultProps = {
+    iconColorBelow: "muted",
+    iconBelow: "circle",
+    iconColor: "white",
+    icon: "question",
+};
+
+export { Activity };

app/routes/components/Dropdowns/DropdownProfile.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { 
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+
+const DropdownProfile = (props) => (
+    <React.Fragment>
+        <DropdownMenu right={ props.right } >
+            <DropdownItem header>
+                { faker.name.firstName() } { faker.name.lastName() }
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem tag={ Link } to="/apps/profile-details">
+                My Profile
+            </DropdownItem>
+            <DropdownItem tag={ Link } to="/apps/settings-edit">
+                Settings
+            </DropdownItem>
+            <DropdownItem tag={ Link } to="/apps/billing-edit">
+                Billings
+            </DropdownItem>
+            <DropdownItem divider />
+            <DropdownItem tag={ Link } to="/pages/login">
+                <i className="fa fa-fw fa-sign-out mr-2"></i>
+                Sign Out
+            </DropdownItem>
+        </DropdownMenu>
+    </React.Fragment>
+)
+DropdownProfile.propTypes = {
+    position: PropTypes.string,
+    right: PropTypes.bool
+};
+DropdownProfile.defaultProps = {
+    position: ""
+};
+
+export { DropdownProfile };

app/routes/components/Dropdowns/Messages.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Avatar, 
+    AvatarAddOn,
+    Media
+} from './../../../components';
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "success",
+    "danger",
+    "warning",
+    "secondary"
+];
+
+const Messages = () => (
+    <React.Fragment>
+        <Media>
+            <Media left className="mr-4">
+                <Avatar.Image
+                    size="md"
+                    src={ randomAvatar() }
+                    addOns={[
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color="white"
+                            key="avatar-icon-bg"
+                        />,
+                        <AvatarAddOn.Icon 
+                            className="fa fa-circle"
+                            color={ randomArray(status) }
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Media>
+            <Media body className="text-left">
+                <span className="d-flex justify-content-start">
+                    <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>
+                <span className="small">
+                    { faker.date.past().toString() }
+                </span>
+            </Media>
+        </Media>
+    </React.Fragment>
+
+)
+
+export { Messages };

app/routes/components/Dropdowns/SwitchVersion.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import { Link } from 'react-router-dom';
+
+import { 
+    Badge, 
+} from './../../../components';
+
+import { 
+    DropdownMenu,
+    DropdownItem
+} from './../../../components';
+
+const SwitchVersion = () => (
+    <React.Fragment>
+        <DropdownMenu>
+            <DropdownItem header>
+                Bootstrap 4 Versions:
+            </DropdownItem>
+            <DropdownItem href="http://jquery.bs4.webkom.co" className="d-flex">
+                <span>
+                    Jquery 2.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+            <DropdownItem href="http://react.bs4.webkom.co" active className="d-flex">
+                <span>
+                    React 2.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw fa-check ml-auto align-self-center pl-4" />
+            </DropdownItem>
+            <DropdownItem href="http://angular.bs4.webkom.co" className="d-flex">
+                <span>
+                    Angular 1.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+            <DropdownItem href="http://vue.bs4.webkom.co" className="d-flex">
+                <span>
+                    Vue 1.0.0
+                    <br />
+                    <span className="small">
+                        Sun, Jun 12, 2018 4:43:12 PM
+                    </span>
+                </span>
+                <i className="fa fa-fw ml-auto align-self-center pl-2" />
+            </DropdownItem>
+        </DropdownMenu>
+    </React.Fragment>
+)
+
+export { SwitchVersion };