Tomasz Owczarczyk
91
app/routes/components/SearchResults/ImagesResultsCard.js
Executable file
91
app/routes/components/SearchResults/ImagesResultsCard.js
Executable file
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardImg,
|
||||
HolderProvider,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
CardFooter,
|
||||
CardBody
|
||||
} from './../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../utilities';
|
||||
|
||||
const status = [
|
||||
"danger",
|
||||
"success",
|
||||
"warning",
|
||||
"secondary"
|
||||
];
|
||||
|
||||
const ImagesResultsCard = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Card */}
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<div className="d-flex mb-3">
|
||||
<span>
|
||||
<a className="h6 text-decoration-none" href="#">
|
||||
{ faker.commerce.productName() }
|
||||
</a>
|
||||
<br />
|
||||
<a href="#" className="text-success">
|
||||
{ faker.internet.url() }
|
||||
</a>
|
||||
</span>
|
||||
<a href="#" className="ml-auto">
|
||||
<i className="fa fa-external-link"></i>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<div className="mt-0 d-flex text-inverse">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</div>
|
||||
<span>
|
||||
{ faker.address.state() }, { faker.address.stateAbbr() }
|
||||
</span>
|
||||
</Media>
|
||||
</Media>
|
||||
</CardBody>
|
||||
<CardFooter className="bt-0">
|
||||
<span className="mr-3">
|
||||
<i className="fa fa-eye mr-1"></i> <span className="text-inverse">233</span>
|
||||
</span>
|
||||
<span>
|
||||
<i className="fa fa-heart-o mr-1"></i> <span className="text-inverse">98</span>
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card */}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { ImagesResultsCard };
|
||||
76
app/routes/components/SearchResults/SearchResultsCard.js
Executable file
76
app/routes/components/SearchResults/SearchResultsCard.js
Executable file
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardBody
|
||||
} from './../../../components';
|
||||
|
||||
import { randomArray } from './../../../utilities';
|
||||
|
||||
const stars = [
|
||||
<span key="stars5">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
</span>,
|
||||
<span key="stars4">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars4">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars2">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars1">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
];
|
||||
|
||||
const SearchResultsCard = () => (
|
||||
<React.Fragment>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<a href="#" className="h6 text-decoration-none">
|
||||
{ faker.lorem.sentence() }
|
||||
</a>
|
||||
<br />
|
||||
<div className="mb-2">
|
||||
<span className="text-success">
|
||||
{ faker.internet.url() }
|
||||
</span>
|
||||
<span className="mx-2">·</span>
|
||||
{ randomArray(stars) }
|
||||
<span className="mx-2">·</span>
|
||||
<span>
|
||||
Votes
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-0">
|
||||
{ faker.lorem.paragraph() }
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SearchResultsCard };
|
||||
35
app/routes/components/SearchResults/SearchResultsHeader.js
Executable file
35
app/routes/components/SearchResults/SearchResultsHeader.js
Executable file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
Button,
|
||||
} from './../../../components';
|
||||
|
||||
const SearchResultsHeader = () => (
|
||||
<React.Fragment>
|
||||
<div className="mb-4">
|
||||
<h4 className="mt-2 mb-3">
|
||||
<small className="mr-1">
|
||||
Search Results for
|
||||
</small> "Content Designer"
|
||||
<small className="mr-2">
|
||||
<small className="ml-3">
|
||||
About 1,370 result (0.13 seconds)
|
||||
</small>
|
||||
</small>
|
||||
</h4>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search for..." className="bg-white" />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="primary">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SearchResultsHeader };
|
||||
254
app/routes/components/SearchResults/SearchResultsLeftNav.js
Executable file
254
app/routes/components/SearchResults/SearchResultsLeftNav.js
Executable file
@@ -0,0 +1,254 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { NavLink as RouterNavLink } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Nav,
|
||||
NavLink,
|
||||
NavItem,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
Button,
|
||||
CustomInput,
|
||||
Badge
|
||||
} from './../../../components';
|
||||
|
||||
const SearchResultsLeftNav = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Navigation */}
|
||||
<Nav vertical pills className="mb-3">
|
||||
<NavItem>
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Navigation
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink tag={ RouterNavLink } to="/apps/search-results" className="d-flex">
|
||||
All Results
|
||||
<Badge pill color="secondary" className="ml-auto align-self-center">
|
||||
12
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink tag={ RouterNavLink } to="/apps/images-results" className="d-flex">
|
||||
Images
|
||||
<Badge pill color="secondary" className="ml-auto align-self-center">
|
||||
5
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink tag={ RouterNavLink } to="/apps/videos-results" className="d-flex">
|
||||
Videos
|
||||
<Badge pill color="secondary" className="ml-auto align-self-center">
|
||||
10
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink tag={ RouterNavLink } to="/apps/users-results" className="d-flex">
|
||||
Users
|
||||
<Badge pill color="secondary" className="ml-auto align-self-center">
|
||||
2
|
||||
</Badge>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Navigation */}
|
||||
{ /* START Category */}
|
||||
<Nav vertical className="mb-3">
|
||||
<NavItem>
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Category
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<span>
|
||||
{ faker.commerce.department() }
|
||||
</span>
|
||||
<span className="small ml-auto align-self-center text-body">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<span>
|
||||
{ faker.commerce.department() }
|
||||
</span>
|
||||
<span className="small ml-auto align-self-center text-body">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="#" className="d-flex">
|
||||
<span>
|
||||
{ faker.commerce.department() }
|
||||
</span>
|
||||
<span className="small ml-auto align-self-center text-body">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Category */}
|
||||
{ /* START Rating */}
|
||||
<Nav vertical className="mb-3">
|
||||
<NavItem className="mb-2">
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Rating
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="radio" id="radio1" name="rating" label="Clothing" inline defaultChecked />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="radio" id="radio2" name="rating" label="Baby" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="radio" id="radio3" name="rating" label="Jewelery" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="radio" id="radio4" name="rating" label="Games" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Rating */}
|
||||
{ /* START Tags */}
|
||||
<Nav vertical className="mb-3">
|
||||
<NavItem className="mb-2">
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Tags
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="checkbox" id="checkbox1" label="Garden" inline defaultChecked />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="checkbox" id="checkbox2" label="Beauty" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="checkbox" id="checkbox3" label="Clothing" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex px-2 mb-2">
|
||||
<CustomInput type="checkbox" id="checkbox4" label="Games" inline />
|
||||
<span className="small ml-auto align-self-center">
|
||||
({ faker.finance.mask() })
|
||||
</span>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Tags */}
|
||||
{ /* START Price */}
|
||||
<Nav vertical className="mb-3">
|
||||
<NavItem className="mb-2">
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Price
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex p-0">
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend">
|
||||
$
|
||||
</InputGroupAddon>
|
||||
<Input placeholder="Min: 5" className="bg-white" />
|
||||
<Input placeholder="Max: 87" className="bg-white" />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline>
|
||||
<i className="fa fa-check"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Price */}
|
||||
{ /* START Shipping */}
|
||||
<Nav vertical className="mb-3">
|
||||
<NavItem className="mb-2">
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Shipping
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex p-0">
|
||||
<CustomInput type="select" name="select" id="shipping">
|
||||
<option>England</option>
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Australia</option>
|
||||
<option>Other...</option>
|
||||
</CustomInput>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Shipping */}
|
||||
{ /* START Sales */}
|
||||
<Nav vertical className="mb-4">
|
||||
<NavItem className="mb-2">
|
||||
<NavLink href="#" className="small d-flex px-1">
|
||||
<span>
|
||||
Sales
|
||||
</span>
|
||||
<i className="fa fa-angle-down align-self-center ml-auto"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-flex p-0">
|
||||
<CustomInput type="select" name="select" id="sales">
|
||||
<option>England</option>
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Australia</option>
|
||||
<option>Other...</option>
|
||||
</CustomInput>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
{ /* END Sales */}
|
||||
<Button color="primary" block>
|
||||
Confirm Changes
|
||||
</Button>
|
||||
<Button color="link" block>
|
||||
Reset to Default
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SearchResultsLeftNav };
|
||||
106
app/routes/components/SearchResults/UsersResultsCard.js
Executable file
106
app/routes/components/SearchResults/UsersResultsCard.js
Executable file
@@ -0,0 +1,106 @@
|
||||
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 };
|
||||
137
app/routes/components/SearchResults/VideosResultsCard.js
Executable file
137
app/routes/components/SearchResults/VideosResultsCard.js
Executable file
@@ -0,0 +1,137 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardImg,
|
||||
HolderProvider,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
Button,
|
||||
Badge,
|
||||
CardBody
|
||||
} from './../../../components';
|
||||
|
||||
import { randomArray, randomAvatar } from './../../../utilities';
|
||||
|
||||
const status = [
|
||||
"warning",
|
||||
"danger",
|
||||
"success",
|
||||
"secondary"
|
||||
];
|
||||
const stars = [
|
||||
<span key="stars5">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
</span>,
|
||||
<span key="stars4">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars4">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars2">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star text-warning"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
<span key="stars1">
|
||||
<i className="fa fa-fw fa-star text-warning" />
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
<i className="fa fa-fw fa-star-o"></i>
|
||||
</span>,
|
||||
];
|
||||
|
||||
const VideosResultsCard = () => (
|
||||
<React.Fragment>
|
||||
<Card className="mb-3">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width="100p"
|
||||
height={350}
|
||||
>
|
||||
<CardImg height="100px" />
|
||||
</HolderProvider.Icon>
|
||||
</div>
|
||||
<div className="col-md-8 py-2">
|
||||
<CardBody>
|
||||
<div>
|
||||
<a href="#" className="h6 mb-0">
|
||||
{ faker.commerce.productName() }
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-success mb-3">
|
||||
{ faker.internet.url() }
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
{ faker.lorem.paragraph() }
|
||||
</div>
|
||||
<div>
|
||||
{ randomArray(stars) } <span className="ml-2">16 Reviews</span>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Badge color="secondary" pill className="mr-1">
|
||||
{ faker.internet.domainName() }
|
||||
</Badge>
|
||||
<Badge color="secondary" pill className="mr-1">
|
||||
{ faker.internet.domainName() }
|
||||
</Badge>
|
||||
<Badge color="secondary" pill className="mr-1">
|
||||
{ faker.internet.domainName() }
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<Media>
|
||||
<Media left className="align-self-center mr-3">
|
||||
<Avatar.Image
|
||||
size="sm"
|
||||
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>
|
||||
<div className="mt-0">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</div>
|
||||
</CardBody>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { VideosResultsCard };
|
||||
Reference in New Issue
Block a user