Init

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

app/routes/components/Chat/ChatRight.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import faker from 'faker/locale/en_US';
+
+import { 
+    Card,
+    Media,
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray, randomAvatar } from './../../../utilities';
+
+const status = [
+    "warning",
+    "danger",
+    "success",
+    "secondary"
+];
+
+const ChatRight = (props) => (
+    <React.Fragment>
+        <Media className="mb-2">
+            <Media body>
+                <Card body className={ `mb-2 ${ props.cardClassName }` }>
+                    <p className="mb-0">
+                        { faker.lorem.paragraph() }
+                    </p>                                                   
+                </Card>
+                <div className="mb-2 text-right">
+                    <span className="text-inverse mr-2">
+                        { faker.name.firstName() } { faker.name.firstName() }
+                    </span>
+                    <span className="small">
+                        13-Jun-2015, 08:13
+                    </span>
+                </div>
+            </Media>
+            <Media right className="ml-3">
+                <Avatar.Image
+                    size="md"
+                    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={ randomArray(status) }
+                            key="avatar-icon-fg"
+                        />
+                    ]}
+                />
+            </Media>
+        </Media>
+    </React.Fragment>
+)
+ChatRight.propTypes = {
+    cardClassName: PropTypes.node
+};
+ChatRight.defaultProps = {
+    cardClassName: "bg-white"
+};
+
+export { ChatRight };