diff --git a/app/javascript/gabsocial/components/panel/shop_panel.js b/app/javascript/gabsocial/components/panel/shop_panel.js
index dd33a882..7c6d40a0 100644
--- a/app/javascript/gabsocial/components/panel/shop_panel.js
+++ b/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 Text from '../text'
+import ShopItem from '../shop_item'
const messages = defineMessages({
title: { id: 'shop_panel.title', defaultMessage: 'Dissenter Shop' },
@@ -74,26 +73,14 @@ class ShopPanel extends PureComponent {
>
diff --git a/app/javascript/gabsocial/components/shop_item.js b/app/javascript/gabsocial/components/shop_item.js
new file mode 100644
index 00000000..824dad3e
--- /dev/null
+++ b/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 (
+
+
+
+
+ {name}
+
+
+ {
+ !!price &&
+
+ {price}
+
+ }
+
+ )
+ }
+
+}
+
+ShopItem.propTypes = {
+ image: PropTypes.string.isRequired,
+ link: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ price: PropTypes.string,
+}
+
+export default ShopItem
\ No newline at end of file