mirror of https://github.com/mue/mue.git
54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
import { MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
|
|
import { Button } from 'components/Elements';
|
|
import variables from 'config/variables';
|
|
|
|
const Collection = ({ collection, toggle, collectionFunction }) => {
|
|
const { news, background_colour, img, display_name, description, name } = collection;
|
|
|
|
const getStyle = () => {
|
|
if (news) {
|
|
return { backgroundColor: background_colour };
|
|
}
|
|
return {
|
|
backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + img}')`,
|
|
};
|
|
};
|
|
|
|
return (
|
|
<div className="collection" style={getStyle()}>
|
|
<div className="content">
|
|
<span className="title">{display_name} using component</span>
|
|
<span className="subtitle">{description}</span>
|
|
</div>
|
|
{collection.news === true ? (
|
|
<a
|
|
className="btn-collection"
|
|
href={collection.news_link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
|
|
</a>
|
|
) : (
|
|
<Button
|
|
type="collection"
|
|
onClick={() => collectionFunction(collection.name)}
|
|
icon={<MdOutlineArrowForward />}
|
|
label={variables.getMessage('modals.main.marketplace.explore_collection')}
|
|
iconPlacement={'right'}
|
|
/>
|
|
)}
|
|
{/*<Button
|
|
type="collection"
|
|
onClick={() => toggle('collection', name)}
|
|
icon={<MdOutlineArrowForward />}
|
|
label={variables.getMessage('modals.main.marketplace.explore_collection')}
|
|
iconPlacement="right"
|
|
/>*/}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Collection;
|
|
export { Collection };
|