diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx index e3bc3c5a..cb7ea05a 100644 --- a/src/components/modals/main/marketplace/Items.jsx +++ b/src/components/modals/main/marketplace/Items.jsx @@ -1,5 +1,5 @@ import variables from 'modules/variables'; -import React, { useState } from "react"; +import React, { useState } from 'react'; import { MdAutoFixHigh, MdOutlineArrowForward, MdExpandMore } from 'react-icons/md'; export default function Items({ @@ -14,36 +14,34 @@ export default function Items({ const [count, setCount] = useState(8); const incrementCount = () => { if (count !== items.length && count <= items.length) { - if ((count + 8) > items.length) { + if (count + 8 > items.length) { setCount(count + (items.length - count)); - } - else { + } else { setCount(count + 8); } } }; + const collection = collections[Math.floor(Math.random() * collections.length)]; + return ( <> - {(type === 'all' && !onCollection) || (type ==='collections') ? ( + {(type === 'all' && !onCollection) || type === 'collections' ? ( <> - {collections.map((collection, index) => ( -
-
- {collection.display_name} - {collection.description} -
- +
+
+ {collection.display_name} + {collection.description}
- ))} + +
) : null}
@@ -61,14 +59,20 @@ export default function Items({
))}
-
- {(count !== items.length && items.length >= 8) ? ( - Show More +
+ {count !== items.length && items.length >= 8 ? ( + + Show More + ) : null} {items.length <= 8 ? ( - Showing {items.length} / {items.length} + + Showing {items.length} / {items.length} + ) : ( - Showing {count} / {items.length} + + Showing {count} / {items.length} + )}
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index bbaf2595..e82e0a56 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -108,6 +108,9 @@ export default class Marketplace extends PureComponent { ).json(); this.setState({ items: collection.data.items, + collectionTitle: collection.data.name, + collectionDescription: collection.data.description, + collectionImg: collection.data.img, collection: true, done: true, }); @@ -319,12 +322,15 @@ export default class Marketplace extends PureComponent { Collection
-
+
- Red Dead Redemption - - A Collection of stuff inspired by the video game series Red Dead. - + {this.state.collectionTitle} + {this.state.collectionDescription}
Collection
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 45128649..db0f3bfa 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -347,9 +347,8 @@ p.author { @include themed() { border-radius: t($borderRadius); - background-image: linear-gradient(to bottom, transparent, #2f3542), - url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505'); } + .nice-tag { border-radius: 150px; padding: 1px 12px;