import { Link } from 'gatsby' import styled from '@emotion/styled'; import React, { Fragment } from 'react' import { Highlight, Snippet } from 'react-instantsearch-dom' import { Tag } from 'styled-icons/octicons' import { Calendar } from 'styled-icons/octicons' import { connectHits } from 'react-instantsearch-dom' import { FaInstagram, FaFacebookSquare, FaPinterestSquare, FaTwitterSquare, FaYoutube, FaRegLaugh, FaChartLine, FaAt, FaPaypal, FaAmazon, FaShopify, FaApple, FaTags, FaTruck, FaRegStar, FaBoxOpen, FaUndoAlt, } from 'react-icons/fa'; const Wrapper = styled.div` width: calc(100% - 1rem) !important; display: flex; padding: 0.5rem; margin: 2px; min-height: 60px; @media (min-width: 600px) { height: 130px; } `; const Image = styled.div` display: flex; margin-right: 1em; height: 65px; min-width: 78px; img { border-radius: 50%; margin: auto; width: auto; max-height: 65px; } `; const Information = styled.div` width: 75%; display: flex; flex-direction: column; justify-content: space-between; `; const Title = styled.h3` font-size: 18px; text-transform: capitalize; font-weight: bold; margin-bottom: 0px; color: ${props => props.theme.colors.black.blue}; `; const Tags = styled.span` font-size: 12px; font-family: 'Jost','Segoe UI','Roboto','Candal',-apple-system,'BlinkMacSystemFont','Segoe UI','Helvetica','Arial',sans-serif; font-weight: 300; margin: 5px 0;; white-space: none; overflow: hidden; word-wrap: none; text-overflow: ellipsis; display: block; color: ${props => props.theme.colors.black.base}; `; const Stats = styled.span` font-size: 12px; display: block; color: ${props => props.theme.colors.black.base}; margin-bottom: 8px; svg { height: 0.5rem; } `; const shopHit = hit => ( <div> <Tag size="1em" /> <Highlight attribute="tags" hit={hit} tagName="mark" /> </div> ) export default connectHits(function HitComp({ type, hits, onClick }) { const extend = { shopHit }[type] //console.log(hits) //adding the excertp of 140 characters to all the hits hits.map(hit => { if (hit._highlightResult.shopDescription && hit._highlightResult.shopDescription.value) { let text = hit._highlightResult.shopDescription.value; //remove the highlighting text = text.replace("<ais-highlight-0000000000>", ""); text = text.replace("</ais-highlight-0000000000>", ""); text = text.substring(0, 100) + "..."; //add the highlighting back text = text.replace(hit._highlightResult.shopDescription.matchedWords[0], "<ais-highlight-0000000000>" + hit._highlightResult.shopDescription.matchedWords[0] + "</ais-highlight-0000000000>") hit._highlightResult.shopDescription.value = text; } }) return hits.map(hit => ( <Wrapper key={hit.slug}> {/* <Link to={`/shops/` + hit.emprezzoID + `/`} onClick={onClick}> <h4> <Highlight attribute="shopName" hit={hit || ""} tagName="mark" /> </h4> </Link> <Highlight attribute="shopDescription" hit={hit || ""} tagName="mark" /> */} <div style={{ width: "25%" }}> <Link href={`/shops/${hit.emprezzoID}/`} title={hit.shopName} target="_blank"> <Image> <img src={hit.shopImage || hit.imageURL} /> </Image> </Link> </div> <Information> <a href={`/shops/${hit.emprezzoID}/`} title={hit.shopName}> <div> <Title><Highlight attribute="shopName" hit={hit || ""} tagName="mark" /></Title> <Tags>{hit.shopCategory}: {hit.shopTags}</Tags> <Stats> {hit.priceMin && <span style={{ paddingRight: "0" }}>${Math.round(hit.priceMin)}-${Math.round(hit.priceMax)} / ${Math.round(hit.priceAvg)} avg</span> } </Stats> <Stats> {hit.freeShipMin != null && hit.freeShipMin != 0 && <span><FaTruck size="14" color="#666" class="icon" title="Free shipping minimum" /> ${hit.freeShipMin}+</span> } {hit.freeShipMin == 0 && <span title="most orders ship free!"><FaTruck size="14" color="#666" class="icon" title="Get free shipping on most orders!" />* </span> } {hit.baseShipRate > 0 && <span> <FaBoxOpen paddingRight='2px' size="14" color="#666" class="icon" title="Shipping rates from" />${hit.baseShipRate}+ </span> } {hit.returnDays != null && hit.returnDays != "0" && <span title={`${hit.returnDays} day returns`}> <FaUndoAlt paddingRight='5px' size="14" color="#666" />{hit.returnDays} </span> } {hit.returnShipFree != "." && hit.returnShipFree == "Yes" && <span> <FaRegStar size="14" color="#666" title="Most returns ship free" /></span> } </Stats> <br /> </div> </a> </Information> </Wrapper> )) })