Init

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

app/routes/components/Profile/DlRowAddress.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DlRowAddress = (props) => (
+    <React.Fragment>
+        <dl className="row">
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Adress</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>700 Zemlak Glen</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>City</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>Jacobiton</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>State</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }><a href="#">West Virginia</a></dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>ZIP</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>87032</dd>
+        </dl>
+    </React.Fragment>
+)
+DlRowAddress.propTypes = {
+    leftSideClassName: PropTypes.node,
+    rightSideClassName: PropTypes.node
+};
+DlRowAddress.defaultProps = {
+    leftSideClassName: "",
+    rightSideClassName: ""
+};
+
+export { DlRowAddress };

app/routes/components/Profile/DlRowContacts.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DlRowContacts = (props) => (
+    <React.Fragment>
+        <dl className="row">
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Phone</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>340-702-6720</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Mobile</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>363-999-9380</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Fax</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>727-613-5840</dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Email</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }>
+                <a href="#">t.herald@gmail.com</a>
+            </dd>
+            <dt className={ `col-sm-3 ${ props.leftSideClassName }` }>Skype</dt>
+            <dd className={ `col-sm-9 ${ props.rightSideClassName }` }><a href="#">t.herald</a></dd>
+        </dl>
+    </React.Fragment>
+)
+DlRowContacts.propTypes = {
+    leftSideClassName: PropTypes.node,
+    rightSideClassName: PropTypes.node
+};
+DlRowContacts.defaultProps = {
+    leftSideClassName: "text-right",
+    rightSideClassName: "text-left"
+};
+
+export { DlRowContacts };

app/routes/components/Profile/ProfileHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import faker from 'faker/locale/en_US';
+
+import { 
+    Badge,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+import { randomAvatar } from './../../../utilities';
+
+const ProfileHeader = () => (
+    <React.Fragment>
+        { /* START Header */}
+        <Media className="mb-3">
+            <Media left middle className="mr-3 align-self-center">
+              <Avatar.Image
+                size="lg"
+                src={ randomAvatar() }
+                className="mr-2"
+                addOns={[
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color="white"
+                        key="avatar-icon-bg"
+                    />,
+                    <AvatarAddOn.Icon 
+                        className="fa fa-circle"
+                        color="success"
+                        key="avatar-icon-fg"
+                    />
+                ]}
+            />
+            </Media>
+            <Media body>
+                <h5 className="mb-1 mt-0">
+                    <Link to="/apps/profile-details">
+                        { faker.name.firstName() } { faker.name.lastName() }
+                    </Link> <span className="text-muted mx-1"> / </span> Profile Edit
+                </h5>
+                <Badge color="primary" pill className="mr-2">Premium</Badge> 
+                <span className="text-muted">Edit Your Name, Avatar, etc.</span>
+            </Media>
+        </Media>
+        { /* END Header */}
+    </React.Fragment>
+)
+
+export { ProfileHeader };

app/routes/components/Profile/ProfileLeftNav.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+import { 
+    Nav,
+    NavItem,
+    NavLink
+} from './../../../components';
+
+const ProfileLeftNav = () => (
+    <React.Fragment>
+        { /* START Left Nav  */}
+        <div className="mb-4">
+            <Nav pills vertical>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/profile-edit">
+                        Profile Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/account-edit">
+                        Account Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/billing-edit">
+                        Billing Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/settings-edit">
+                        Settings Edit
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink tag={ RouterNavLink } to="/apps/sessions-edit">
+                        Sessions Edit
+                    </NavLink>
+                </NavItem>
+            </Nav>
+        </div>
+        { /* END Left Nav  */}
+    </React.Fragment>
+)
+
+export { ProfileLeftNav };

app/routes/components/Profile/ProfileOverviewCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { 
+    CardTitle,
+    Badge
+} from './../../../components';
+
+const ProfileOverviewCard = (props) => (
+    <React.Fragment>
+        <div className="d-flex">
+            <CardTitle tag="h6">
+                { props.title }
+            </CardTitle>
+            <Badge pill color={ `${ props.badgeColor }` } className="align-self-start ml-auto">
+                { props.badgeTitle }
+            </Badge>
+        </div>
+        <div className="text-center my-4">
+            <h2>{ props.value }</h2>
+            <span>
+                { props.valueTitle }
+            </span>
+        </div>
+        <div className="d-flex">
+            <span>
+                { props.footerTitle }
+            </span>
+            <span className={ `ml-auto ${ props.footerTitleClassName }` }>
+                <i className={ `fa mr-1 fa-${ props.footerIcon }` }></i>
+                { props.footerValue }
+            </span>
+        </div>
+    </React.Fragment>
+)
+ProfileOverviewCard.propTypes = {
+    title: PropTypes.node,
+    badgeColor: PropTypes.node,
+    badgeTitle: PropTypes.node,
+    value: PropTypes.node,
+    valueTitle: PropTypes.node,
+    footerTitle: PropTypes.node,
+    footerTitleClassName: PropTypes.node,
+    footerIcon: PropTypes.node,
+    footerValue: PropTypes.node
+};
+ProfileOverviewCard.defaultProps = {
+    title: "Waiting",
+    badgeColor: "secondary",
+    badgeTitle: "Waiting",
+    value: "0.000",
+    valueTitle: "Waiting",
+    footerTitle: "Waiting",
+    footerTitleClassName: "text-muted",
+    footerIcon: "caret-down",
+    footerValue: "0.00%"
+};
+
+export { ProfileOverviewCard };