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

97
app/routes/Tables/Tables/components/TrTableResponsive.js Executable file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import _ from 'lodash';
import {
UncontrolledTooltip,
Media
} from './../../../../components';
/*eslint-disable */
const browserOs = [
"Safari",
"Firefox",
"Opera",
"Chrome"
];
/*eslint-enable */
/*eslint-disable */
const browserIcon = [
"desktop",
"laptop",
"mobile",
"tablet"
];
/*eslint-enable */
/*eslint-disable */
const colorStatus = [
"danger",
"success",
"warning",
"secondary"
];
/*eslint-enable */
const TrTableResponsive = () => (
<React.Fragment>
{
_.times(4, (index) => (
<tr key={ index }>
<td className="align-middle">
<i className={`fa fa -fw fa-circle text-${ colorStatus[index%4] }`}></i>
</td>
<td className="align-middle">
<Media>
<Media left className="align-self-center mr-3">
<i className={`fa fa-fw fa-${ browserIcon[index%4] } fa-lg`}></i>
</Media>
<Media body>
<div className="mt-0 d-flex">
<span className="text-inverse">
{ browserOs[index%4] }
</span> /
{ faker.system.semver() }
</div>
<span>
macOs { faker.system.semver() }
</span>
</Media>
</Media>
</td>
<td className="align-middle">
<div>
<samp>
{ faker.internet.ip() }
</samp>
</div>
<span>
-
</span>
</td>
<td className="align-middle">
<div>
{ faker.address.city() }
</div>
<span>
{ faker.address.state() }, { faker.address.country() }
</span>
</td>
<td className="align-middle">
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018<br />
12:34 PM
</td>
<td className="align-middle text-right">
<a href="#" id="UncontrolledTooltipRevoke">
<i className="fa fa-fw fa-close text-danger"></i>
</a>
<UncontrolledTooltip placement="left" target="UncontrolledTooltipRevoke">
Revoke
</UncontrolledTooltip>
</td>
</tr>
))
}
</React.Fragment>
)
export { TrTableResponsive };