Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
app/routes/components/Chat/ChatLeftNav.js Executable file
View File

@@ -0,0 +1,248 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import {
Nav,
NavItem,
Media,
InputGroup,
Input,
InputGroupAddon,
Button,
Avatar,
AvatarAddOn,
NavLink
} from './../../../components';
import { randomAvatar } from './../../../utilities';
const ChatLeftNav = () => (
<React.Fragment>
{ /* START Left Nav */}
<div className="mb-4">
<div className="small mb-3">
Search
</div>
<InputGroup>
<Input placeholder="Search for..." />
<InputGroupAddon addonType="append">
<Button outline color="secondary">
<i className="fa fa-search"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</div>
{ /* END Left Nav */}
{ /* START Left Nav */}
<div className="mb-4">
<div className="mt-4 mb-2">
<span className="small">
Contacts
</span>
</div>
<Nav pills vertical>
<NavItem>
<NavLink href="/chat" active>
<Media>
<Media left className="align-self-start mr-3">
<Avatar.Image
size="sm"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="primary"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color="danger"
key="avatar-icon-fg"
/>
]}
/>
</Media>
<Media body>
<div className="mt-0 d-flex">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.country() }
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-3">
<Avatar.Image
size="sm"
src={ randomAvatar() }
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>
<div className="mt-0 d-flex">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.country() }
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-3">
<Avatar.Image
size="sm"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color="secondary"
key="avatar-icon-fg"
/>
]}
/>
</Media>
<Media body>
<div className="mt-0 d-flex">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.country() }
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
Show All <span className="small mr-2">(345)</span>
<i className="fa fa-angle-down"></i>
</NavLink>
</NavItem>
</Nav>
</div>
{ /* END Left Nav */}
{ /* START Left Nav */}
<div className="mb-4">
<div className="mt-4 mb-2">
<span className="small">
Updates
</span>
</div>
<Nav pills vertical>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-1">
<span className="fa-stack fa-lg fa-fw d-flex align-self-center 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>
</Media>
<Media body>
<div className="mt-0">
{ faker.hacker.phrase() }
</div>
<span className="small">
24-Aug-2012, 12:12
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-1">
<span className="fa-stack fa-lg fa-fw d-flex align-self-center 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>
</Media>
<Media body>
<div className="mt-0">
{ faker.hacker.phrase() }
</div>
<span className="small">
24-Aug-2012, 12:12
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-1">
<span className="fa-stack fa-lg fa-fw d-flex align-self-center 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>
</Media>
<Media body>
<div className="mt-0">
{ faker.hacker.phrase() }
</div>
<span className="small">
24-Aug-2012, 12:12
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
<Media>
<Media left className="align-self-start mr-1">
<span className="fa-stack fa-lg fa-fw d-flex align-self-center 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>
</Media>
<Media body>
<div className="mt-0">
{ faker.hacker.phrase() }
</div>
<span className="small">
24-Aug-2012, 12:12
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="/chat">
Show All <span className="small mr-2">(12)</span>
<i className="fa fa-angle-down"></i>
</NavLink>
</NavItem>
</Nav>
</div>
{ /* END Left Nav */}
</React.Fragment>
)
export { ChatLeftNav };