2021-10-12 21:18:47 +00:00
|
|
|
import variables from 'modules/variables';
|
2022-08-03 09:42:04 +00:00
|
|
|
import React, { useState } from 'react';
|
2022-08-08 14:21:35 +00:00
|
|
|
import { MdAutoFixHigh, MdOutlineArrowForward, MdExpandMore, MdOutlineOpenInNew } from 'react-icons/md';
|
2021-10-12 21:18:47 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
export default function Items({
|
|
|
|
type,
|
|
|
|
items,
|
2022-08-05 11:04:13 +00:00
|
|
|
collections = [],
|
2022-04-08 13:48:36 +00:00
|
|
|
toggleFunction,
|
|
|
|
collectionFunction,
|
|
|
|
onCollection,
|
|
|
|
}) {
|
2022-06-04 10:58:01 +00:00
|
|
|
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
2022-08-02 15:24:19 +00:00
|
|
|
const [count, setCount] = useState(8);
|
|
|
|
const incrementCount = () => {
|
|
|
|
if (count !== items.length && count <= items.length) {
|
2022-08-03 09:42:04 +00:00
|
|
|
if (count + 8 > items.length) {
|
2022-08-02 15:24:19 +00:00
|
|
|
setCount(count + (items.length - count));
|
2022-08-03 09:42:04 +00:00
|
|
|
} else {
|
2022-08-02 15:24:19 +00:00
|
|
|
setCount(count + 8);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2022-08-01 17:28:02 +00:00
|
|
|
|
2022-08-03 09:42:04 +00:00
|
|
|
const collection = collections[Math.floor(Math.random() * collections.length)];
|
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<>
|
2022-08-16 15:38:22 +00:00
|
|
|
{(type === 'all' && !onCollection) || (type === 'collections' && !onCollection) ? (
|
2022-04-08 13:48:36 +00:00
|
|
|
<>
|
2022-08-03 09:42:04 +00:00
|
|
|
<div
|
|
|
|
className="collection"
|
2022-08-08 14:21:35 +00:00
|
|
|
style={collection.news ? {backgroundColor: collection.background_colour} : {backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`}}
|
2022-08-03 09:42:04 +00:00
|
|
|
>
|
|
|
|
<div className="content">
|
|
|
|
<span className="title">{collection.display_name}</span>
|
|
|
|
<span className="subtitle">{collection.description}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
2022-08-08 14:21:35 +00:00
|
|
|
{collection.news === true ? (
|
|
|
|
<a className="nice-button" href={collection.news_link}>
|
|
|
|
Learn More <MdOutlineOpenInNew />
|
|
|
|
</a>
|
|
|
|
) : (
|
|
|
|
<button className="nice-button" onClick={() => collectionFunction(collection.name)}>
|
|
|
|
<MdOutlineArrowForward /> {getMessage('modals.main.marketplace.explore_collection')}
|
|
|
|
</button>
|
|
|
|
)}
|
2022-08-03 09:42:04 +00:00
|
|
|
</div>
|
2022-04-08 13:48:36 +00:00
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
<div className="items">
|
2022-08-02 15:24:19 +00:00
|
|
|
{items.slice(0, count).map((item) => (
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="item" onClick={() => toggleFunction(item)} key={item.name}>
|
|
|
|
<img
|
|
|
|
alt="icon"
|
|
|
|
draggable="false"
|
|
|
|
src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
|
|
|
|
/>
|
|
|
|
<div className="card-details">
|
|
|
|
<span className="card-title">{item.display_name || item.name}</span>
|
|
|
|
<span className="card-subtitle">{item.author}</span>
|
|
|
|
</div>
|
2021-04-03 12:32:00 +00:00
|
|
|
</div>
|
2022-04-08 13:48:36 +00:00
|
|
|
))}
|
|
|
|
</div>
|
2022-08-03 09:42:04 +00:00
|
|
|
<div className="showMoreItems">
|
|
|
|
{count !== items.length && items.length >= 8 ? (
|
|
|
|
<span className="link" onClick={incrementCount}>
|
|
|
|
<MdExpandMore /> Show More
|
|
|
|
</span>
|
2022-08-02 20:39:11 +00:00
|
|
|
) : null}
|
|
|
|
{items.length <= 8 ? (
|
2022-08-03 09:42:04 +00:00
|
|
|
<span className="subtitle">
|
|
|
|
Showing {items.length} / {items.length}
|
|
|
|
</span>
|
2022-08-02 20:39:11 +00:00
|
|
|
) : (
|
2022-08-03 09:42:04 +00:00
|
|
|
<span className="subtitle">
|
|
|
|
Showing {count} / {items.length}
|
|
|
|
</span>
|
2022-08-02 20:39:11 +00:00
|
|
|
)}
|
2022-08-02 15:24:19 +00:00
|
|
|
</div>
|
2022-08-01 17:28:02 +00:00
|
|
|
<div className="loader"></div>
|
2022-04-27 15:30:54 +00:00
|
|
|
{type === 'all' && !onCollection ? (
|
2022-04-24 20:12:49 +00:00
|
|
|
<div className="createYourOwn">
|
|
|
|
<MdAutoFixHigh />
|
2022-06-04 10:58:01 +00:00
|
|
|
<span className="title">{getMessage('modals.main.marketplace.cant_find')}</span>
|
2022-04-24 20:12:49 +00:00
|
|
|
<span className="subtitle">
|
2022-06-04 10:58:01 +00:00
|
|
|
{getMessage('modals.main.marketplace.knowledgebase_one')}{' '}
|
2022-07-28 12:12:13 +00:00
|
|
|
<a
|
|
|
|
className="link"
|
|
|
|
target="_blank"
|
|
|
|
href={variables.constants.KNOWLEDGEBASE}
|
|
|
|
rel="noreferrer"
|
|
|
|
>
|
2022-06-04 10:58:01 +00:00
|
|
|
{getMessage('modals.main.marketplace.knowledgebase_two')}
|
2022-06-03 20:52:37 +00:00
|
|
|
</a>{' '}
|
2022-06-04 10:58:01 +00:00
|
|
|
{getMessage('modals.main.marketplace.knowledgebase_three')}
|
2022-04-24 20:12:49 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-04-08 13:48:36 +00:00
|
|
|
</>
|
2021-03-17 13:01:53 +00:00
|
|
|
);
|
|
|
|
}
|