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

179
app/routes/components/Projects/ProjectsLeftNav.js Executable file
View File

@@ -0,0 +1,179 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import {
InputGroup,
Button,
Input,
InputGroupAddon,
Nav,
NavItem,
NavLink,
Badge,
Media,
Avatar
} from './../../../components';
import { randomAvatar } from './../../../utilities';
const ProjectsLeftNav = () => (
<React.Fragment>
{ /* START Left Nav */}
<div className="mb-4">
<div className="small mb-3">
Search
</div>
<InputGroup>
<Input placeholder="Search for..." className="bg-white" />
<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="small mb-3">
Favorites
</div>
<Nav pills vertical>
<NavItem>
<NavLink href="#" active>
<i className="fa fa-fw fa-line-chart mr-2"></i>
Overview
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<i className="fa fa-fw fa-calendar-o mr-2"></i>
Calendar
</NavLink>
</NavItem>
</Nav>
</div>
{ /* END Left Nav */}
{ /* START Left Nav */}
<div className="mb-4">
<div className="small mb-3">
Projects
</div>
<Nav pills vertical>
<NavItem>
<NavLink href="#" className="d-flex">
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
Analytics Redesign
<Badge color="secondary" pill className="ml-auto align-self-center">
12
</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#" className="d-flex">
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
New Website
<Badge color="secondary" pill className="ml-auto align-self-center">
4
</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#" className="d-flex">
<i className="fa fa-fw fa-star-o align-self-center mr-2"></i>
Chart for Newsletter
<Badge color="secondary" pill className="ml-auto align-self-center">
9
</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<i className="fa fa-fw fa-plus mr-2"></i>
Add New Project
</NavLink>
</NavItem>
</Nav>
</div>
{ /* END Left Nav */}
{ /* START Left Nav */}
<div className="mb-4">
<div className="small mb-3">
People
</div>
<Nav pills vertical>
<NavItem>
<NavLink href="#" className="d-flex">
<Media>
<Media left middle className="mr-3 align-self-center">
<Avatar.Image
size="md"
src={ randomAvatar() }
/>
</Media>
<Media body>
<div className="mt-0">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.state() }, { faker.address.stateAbbr() }
</span>
</Media>
</Media>
<i className="fa fa-fw fa-circle text-success ml-auto align-self-center ml-2"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#" className="d-flex">
<Media>
<Media left middle className="mr-3 align-self-center">
<Avatar.Image
size="md"
src={ randomAvatar() }
/>
</Media>
<Media body>
<div className="mt-0">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.state() }, { faker.address.stateAbbr() }
</span>
</Media>
</Media>
<i className="fa fa-fw fa-circle text-warning ml-auto align-self-center ml-2"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#" className="d-flex">
<Media>
<Media left middle className="mr-3 align-self-center">
<Avatar.Image
size="md"
src={ randomAvatar() }
/>
</Media>
<Media body>
<div className="mt-0">
{ faker.name.firstName() } { faker.name.lastName() }
</div>
<span className="small">
{ faker.address.state() }, { faker.address.stateAbbr() }
</span>
</Media>
</Media>
<i className="fa fa-fw fa-circle text-danger ml-auto align-self-center ml-2"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<i className="fa fa-fw fa-plus mr-2"></i>
Add New People
</NavLink>
</NavItem>
</Nav>
</div>
{ /* END Left Nav */}
</React.Fragment>
)
export { ProjectsLeftNav };