249 lines
11 KiB
JavaScript
Executable File
249 lines
11 KiB
JavaScript
Executable File
import React from 'react';
|
|
import { faker } from '@faker-js/faker/locale/fr';
|
|
|
|
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 };
|