Added ShopItem component to be used in ShopPanel component

• Added:
- ShopItem component to be used in ShopPanel component

app/javascript/gabsocial/components/panel/shop_panel.js

@@ -2,8 +2,7 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { fetchFeaturedProducts } from '../../actions/shop'
 import { URL_DISSENTER_SHOP } from '../../constants'
 import PanelLayout from './panel_layout'
-import Image from '../image'
+import ShopItem from '../shop_item'
-import Text from '../text'
 
 const messages = defineMessages({
   title: { id: 'shop_panel.title', defaultMessage: 'Dissenter Shop' },
@@ -74,26 +73,14 @@ class ShopPanel extends PureComponent {
       >
         <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
           {
-            items.map((block) => (
+            items.map((block, i) => (
-              <a
+              <ShopItem
-                className={[_s.default, _s.width50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb5, _s.pr5].join(' ')}
+                key={`shop-item-${i}`}
-                target='_blank'
+                image={block.image}
-                rel='noreferrer noopener'
+                name={block.name}
-                href={block.link}
+                link={block.link}
-                title={block.name}
+                price={block.price}
-              >
+              />
-                <Image
-                  src={block.image}
-                  className={[_s.width100PC, _s.height122PX].join(' ')}
-                />
-
-                <Text
-                  align='center'
-                  className={[_s.py10, _s.px10].join(' ')}
-                >
-                  {block.name}
-                </Text>
-              </a>
             ))
           }
         </div>

app/javascript/gabsocial/components/shop_item.js

@@ -0,0 +1,59 @@
+import { DEFAULT_REL } from '../constants'
+import Image from './image'
+import Text from './text'
+
+class ShopItem extends PureComponent {
+
+  render() {
+    const {
+      image,
+      link,
+      name,
+      price,
+    } = this.props
+
+    return (
+      <a
+        className={[_s.default, _s.width50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb15, _s.pr5].join(' ')}
+        target='_blank'
+        rel={DEFAULT_REL}
+        href={link}
+        title={name}
+      >
+        <Image
+          src={image}
+          className={[_s.width100PC, _s.height122PX].join(' ')}
+        />
+
+        <Text
+          align='center'
+          className={[_s.pt10, _s.px10].join(' ')}
+        >
+          {name}
+        </Text>
+
+        {
+          !!price &&
+          <Text
+            size='small'
+            align='center'
+            color='tertiary'
+            className={[_s.pt5, _s.px10].join(' ')}
+          >
+            {price}
+          </Text>
+        }
+      </a>
+    )
+  }
+
+}
+
+ShopItem.propTypes = {
+  image: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  price: PropTypes.string,
+}
+
+export default ShopItem