Files
Airframe-React/app/routes/components/SearchResults/UsersResultsCard.js
2019-08-15 00:54:44 +02:00

107 lines
3.8 KiB
JavaScript
Executable File

import React from 'react';
import faker from 'faker/locale/en_US';
import {
Card,
UncontrolledTooltip,
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Button,
Badge,
CardBody
} from './../../../components';
import {
Profile
} from "./../Profile";
import { randomArray } from './../../../utilities';
const badgesColors = [
"info",
"primary",
"secondary"
];
const UsersResultsCard = () => (
<React.Fragment>
{ /* START Card */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<Button color="link" size="sm" id="tooltipGridAddToFavorites">
<i className="fa fa-star-o"></i>
</Button>
<UncontrolledTooltip placement="top" target="tooltipGridAddToFavorites">
Add To Favorites
</UncontrolledTooltip>
<UncontrolledButtonDropdown className="ml-auto">
<DropdownToggle color="link" size="sm">
<i className="fa fa-bars"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<i className="fa fa-fw fa-phone mr-2"></i>
Call
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-comment mr-2"></i>
Chat
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-video-camera mr-2"></i>
Video
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-user mr-2"></i>
Profile
</DropdownItem>
<DropdownItem>
<i className="fa fa-fw fa-pencil mr-2"></i>
Edit
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<i className="fa fa-fw fa-trash mr-2"></i>
Delete
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<Profile />
<div className="text-center mb-4">
<div className="mb-2">
<span className="small">
Labels
</span>
</div>
<Badge pill color={ randomArray(badgesColors) } className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge pill color={ randomArray(badgesColors) } className="mr-1">
{ faker.commerce.department() }
</Badge>
<Badge pill color={ randomArray(badgesColors) }>
{ faker.commerce.department() }
</Badge>
</div>
<div className="text-center mb-4">
<div className="mb-2">
<span className="small">
Profile
</span>
</div>
<p className="mb-0">
{ faker.lorem.paragraph() }
</p>
</div>
</CardBody>
</Card>
{ /* END Card */}
</React.Fragment>
)
export { UsersResultsCard };