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

116
app/routes/components/Gallery/GalleryCard.js Executable file
View File

@@ -0,0 +1,116 @@
import React from 'react';
import faker from 'faker/locale/en_US';
import PropTypes from 'prop-types';
import {
Card,
CardImg,
HolderProvider,
Media,
Avatar,
CustomInput,
UncontrolledTooltip,
AvatarAddOn,
Badge,
CardBody
} from './../../../components';
import { randomArray, randomAvatar } from './../../../utilities';
const status = [
"success",
"danger",
"warning",
"secondary"
];
const badges = [
"secondary"
];
const GalleryCard = (props) => (
<React.Fragment>
{ /* START Card */}
<Card className="mb-3">
<HolderProvider.Icon
iconChar=""
size={ 32 }
>
<CardImg top />
</HolderProvider.Icon>
<CardBody>
<Media className="mb-3">
<Media left>
<CustomInput type="checkbox" id={`galleryCard-${ props.id }` } label="" className="pr-2" />
</Media>
<Media body>
<span>
<a className="h6 text-decoration-none" href="#">
{ faker.commerce.productName() }
</a>
<br />
<span href="#">
{ faker.system.fileName() }
</span>
</span>
</Media>
<Media right>
<a href="#" className="ml-auto" id={`galleryCardTooltip-${ props.id }` }>
<i className="fa fa-download"></i>
</a>
<UncontrolledTooltip placement="top" target={`galleryCardTooltip-${ props.id }` }>
Download
</UncontrolledTooltip>
</Media>
</Media>
<Media className="mb-3">
<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 d-flex text-decoration-none" href="#">
{ faker.name.firstName() } { faker.name.lastName() }
</a>
<span>
{ faker.address.state() }, { faker.address.stateAbbr() }
</span>
</Media>
</Media>
<div>
<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>
</div>
</CardBody>
</Card>
{ /* END Card */}
</React.Fragment>
)
GalleryCard.propTypes = {
id: PropTypes.node
};
GalleryCard.defaultProps = {
id: "1"
};
export { GalleryCard };