Barbel

A React component library for Let's Fish

Barbel

Install

$ npm install --save barbel

Styles

The base styles are from Boostrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

View the Github project

Simple Card

import SimpleCard  from 'simple-card';
<SimpleCard
  heading={'Loch Neldricken'}
  subHeading={'Galloway Forest Park, Scotland'}
  imgSrc={'https://dur8xuaowfaya.cloudfront.net/images/images/000/000/077/medium/neldricken.jpg?1476951599'}
  href={'/waters/loch-neldricken'}
/>

Suggested Search

import SuggestedSearch from 'suggested-search';
const props = {
    items:[{
    "name": "Galloway Forest Park",
    "url": "/search?location=Galloway+Forest+Park+Scotland"
    },
    {
    "name": "Isle of jura",
    "url": "/search?location=Isle+of+Jura"
    },
    {
    "name": "Snowdonia National Park",
    "url": "/search?location=Snowdonia+National+Park"
    },
    {
    "name": "Rhayader and Elan Valley Angling Association",
    "url": "/fishery/rhayader-and-elan-valley-angling-association"
    }],
    label: 'Enter your search',
    placeholder: 'Enter your search',
    errorMessage: 'Sorry, no results for {{search}}',
};

<SuggestedSearch {...props}/>