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

85
app/routes/Apps/GalleryTable/GalleryTable.js Executable file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import {
Container,
Row,
Table,
CardFooter,
Card,
Col
} from './../../../components';
import { HeaderMain } from "../../components/HeaderMain";
import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader";
import { Paginations } from "../../components/Paginations";
import { TrTableGalleryList } from "./components/TrTableGalleryList";
const GalleryTable = () => (
<React.Fragment>
<Container>
<HeaderMain
title="Gallery Table"
className="mb-5 mt-4"
/>
{ /* START Content */}
<Row>
<Col lg={ 12 }>
<ProjectsSmHeader
subTitle="Gallery Table"
linkList="/apps/gallery-table"
linkGrid="/apps/gallery-grid"
/>
<Card>
{ /* START Table */}
<Table className="mb-0" hover size="sm" responsive>
<thead>
<tr>
<th></th>
<th>Thumb</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th>Info</th>
<th className="text-right">Action</th>
</tr>
</thead>
<tbody>
<TrTableGalleryList />
<TrTableGalleryList
id="2"
/>
<TrTableGalleryList
id="3"
/>
<TrTableGalleryList
id="4"
/>
<TrTableGalleryList
id="5"
/>
<TrTableGalleryList
id="6"
/>
<TrTableGalleryList
id="7"
/>
<TrTableGalleryList
id="8"
/>
</tbody>
</Table>
{ /* END Table */}
<CardFooter className="d-flex justify-content-center pb-0">
<Paginations />
</CardFooter>
</Card>
</Col>
</Row>
{ /* END Content */}
</Container>
</React.Fragment>
);
export default GalleryTable;

122
app/routes/Apps/GalleryTable/components/TrTableGalleryList.js Executable file
View File

@@ -0,0 +1,122 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import PropTypes from 'prop-types';
import {
Badge,
CustomInput,
Avatar,
HolderProvider,
CardImg,
Media,
AvatarAddOn,
Button,
UncontrolledTooltip
} from './../../../../components';
import { randomArray, randomAvatar } from './../../../../utilities';
const status = [
"secondary",
"danger",
"success",
"warning"
];
const badges = [
"secondary"
];
const TrTableGalleryList = (props) => (
<React.Fragment>
<tr>
<td className="align-middle">
<CustomInput type="checkbox" id={`trTableGalleryList-${ props.id }` } label="" inline />
</td>
<td className="align-middle">
<HolderProvider.Icon
iconChar=""
size={ 16 }
width={ 100 }
height={ 100 }
>
<CardImg className="rounded" />
</HolderProvider.Icon>
</td>
<td className="align-middle">
<span>
<a className="text-inverse" href="#">
{ faker.commerce.productName() }
</a>
<br />
<span href="#">
{ faker.system.fileName() }
</span>
<br />
<Badge pill color={ randomArray(badges) } className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge pill color={ randomArray(badges) } className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge pill color={ randomArray(badges) } className="mr-1">
{ faker.commerce.department() }
</Badge>
</span>
</td>
<td className="align-middle">
<Media>
<Media left className="align-self-center mr-3">
<Avatar.Image
size="md"
src={ randomAvatar() }
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 body>
<a className="mt-0 text-decoration-none d-flex" href="#">
{ faker.name.firstName() } { faker.name.lastName() }
</a>
<span>
{ faker.address.state() }, { faker.address.stateAbbr() }
</span>
</Media>
</Media>
</td>
<td className="align-middle">
22-Jul-2012
</td>
<td className="align-middle">
Size: { faker.random.number() } Kb<br />
Format: .png
</td>
<td className="align-middle text-right">
<Button color="link" id={`trTableGalleryListTooltip-${ props.id }` }>
<i className="fa fa-fw fa-download"></i>
</Button>
<UncontrolledTooltip placement="left" target={`trTableGalleryListTooltip-${ props.id }` }>
Download
</UncontrolledTooltip>
</td>
</tr>
</React.Fragment>
)
TrTableGalleryList.propTypes = {
id: PropTypes.node
};
TrTableGalleryList.defaultProps = {
id: "1"
};
export { TrTableGalleryList };

3
app/routes/Apps/GalleryTable/index.js Executable file
View File

@@ -0,0 +1,3 @@
import GalleryTable from './GalleryTable';
export default GalleryTable;