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

254
app/routes/components/SearchResults/SearchResultsLeftNav.js Executable file
View 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 };