124 lines
4.3 KiB
JavaScript
Executable File
124 lines
4.3 KiB
JavaScript
Executable File
import React from 'react';
|
|
import faker from 'faker/locale/en_US';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
Badge,
|
|
CardFooter,
|
|
Progress,
|
|
Avatar,
|
|
UncontrolledButtonDropdown,
|
|
DropdownToggle,
|
|
DropdownMenu,
|
|
DropdownItem
|
|
} from './../../../components';
|
|
|
|
import { randomArray, randomAvatar } from './../../../utilities';
|
|
|
|
const badges = [
|
|
<Badge pill color="success" className="mb-2" key="badge-active">
|
|
Active
|
|
</Badge>,
|
|
<Badge pill color="danger" className="mb-2" key="badge-suspended">
|
|
Suspended
|
|
</Badge>,
|
|
<Badge pill color="warning" className="mb-2" key="badge-waiting">
|
|
Waiting
|
|
</Badge>,
|
|
<Badge pill color="secondary" className="mb-2" key="badge-paused">
|
|
Paused
|
|
</Badge>,
|
|
];
|
|
|
|
const taskCompleted = [
|
|
"15",
|
|
"28",
|
|
"30",
|
|
"80",
|
|
"57",
|
|
"90"
|
|
];
|
|
|
|
const ProjectsCardGrid = () => (
|
|
<React.Fragment>
|
|
{ /* START Card */}
|
|
<Card>
|
|
<CardBody>
|
|
{ randomArray(badges) }
|
|
<div className="mb-2">
|
|
<a href="#" className="mr-2">
|
|
<i className="fa fa-fw fa-star-o"></i>
|
|
</a>
|
|
<Link to="/apps/tasks/grid" className="text-decoration-none">
|
|
{ faker.company.catchPhrase() }
|
|
</Link>
|
|
</div>
|
|
<div className="mb-3">
|
|
Last Edited by: { faker.name.firstName() } { faker.name.lastName() } <br />
|
|
{ faker.date.weekday() }, 12 { faker.date.month() }, 2018
|
|
</div>
|
|
<div className="mb-3">
|
|
<Progress value={ randomArray(taskCompleted) } style={{height: "5px"}} className="mb-2" />
|
|
<div>
|
|
Tasks Completed:
|
|
<span className="text-inverse">
|
|
36/94
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
/>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
/>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
className="mr-2"
|
|
/>
|
|
</div>
|
|
</CardBody>
|
|
<CardFooter className="d-flex">
|
|
<span className="align-self-center">
|
|
20 Sep, Fri, 2018
|
|
</span>
|
|
<UncontrolledButtonDropdown className="align-self-center ml-auto">
|
|
<DropdownToggle color="link" size="sm" className="pr-0">
|
|
<i className="fa fa-gear" /><i className="fa fa-angle-down ml-2" />
|
|
</DropdownToggle>
|
|
<DropdownMenu right>
|
|
<DropdownItem>
|
|
<i className="fa fa-fw fa-folder-open mr-2"></i>
|
|
View
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<i className="fa fa-fw fa-ticket mr-2"></i>
|
|
Add Task
|
|
</DropdownItem>
|
|
<DropdownItem>
|
|
<i className="fa fa-fw fa-paperclip mr-2"></i>
|
|
Add Files
|
|
</DropdownItem>
|
|
<DropdownItem divider />
|
|
<DropdownItem>
|
|
<i className="fa fa-fw fa-trash mr-2"></i>
|
|
Delete
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</UncontrolledButtonDropdown>
|
|
</CardFooter>
|
|
</Card>
|
|
{ /* END Card */}
|
|
</React.Fragment>
|
|
)
|
|
|
|
export { ProjectsCardGrid };
|