Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 9x 9x 7x 1x 1x 7x 6x 6x 9x 2x 2x 1x 9x | /* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable max-len */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-indent */
/* eslint-disable react/prop-types */
import React from 'react';
import Parser from 'html-react-parser';
export default function ProductDetails({ product }) {
const {
name,
price,
priceRange,
} = product;
let regularHigh;
let regularLow;
let sellingHigh;
let sellingLow;
if (priceRange) {
if (priceRange.regular) {
regularHigh = priceRange.regular.high;
regularLow = priceRange.regular.low;
}
if (priceRange.selling) {
sellingHigh = priceRange.selling.high;
sellingLow = priceRange.selling.low;
}
}
let regularPrice;
let sellingPrice;
if (price) {
regularPrice = price.regular;
if (price.selling) {
sellingPrice = price.selling;
}
}
return (
<div className="medium-6 large-5 columns">
<h3 className="product-title">{Parser(name)}</h3>
<div>
{regularHigh
? (
<span
className="product-card-old-price"
>
Original Price: $
{regularLow}
-$
{regularHigh}
</span>
)
: regularPrice
? (
<span
className="product-card-regular-price"
>
Original Price: $
{regularPrice}
</span>
) : ''}
</div>
<div>
<span className="product-card-sale-price">
Sale Price: $
{sellingHigh ? `${sellingLow} - $${sellingHigh}` : sellingPrice}
</span>
</div>
<p>
Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque
faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in.
</p>
<label>
Quantity
<select>
<option value="husker">1</option>
<option value="starbuck">2</option>
<option value="hotdog">3</option>
<option value="apollo">4</option>
<option value="apollo">5</option>
<option value="apollo">6</option>
</select>
</label>
<a href="#" className="button large expanded">Buy Now</a>
<div className="small secondary expanded button-group">
<a className="button">Facebook</a>
<a className="button">Twitter</a>
<a className="button">Instagram</a>
</div>
</div>
);
}
|