38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import InlineSVG from 'react-inlinesvg';
|
|
|
|
import check from '../../../../images/check.svg';
|
|
|
|
const checkIcon = (
|
|
<InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
|
|
);
|
|
|
|
|
|
const CollectionItem = ({ inCollection, collection, onSelect }) => (
|
|
<li className="collection-popover__item">
|
|
<div className="collection-popover__item__info">
|
|
{inCollection && checkIcon}
|
|
|
|
<button onClick={onSelect}>
|
|
{collection.name}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="collection-popover__item__view">
|
|
<Link className="collection-popover__item__view-button" to={`/${collection.owner.username}/collections/${collection.id}`}>View</Link>
|
|
</div>
|
|
</li>
|
|
);
|
|
|
|
CollectionItem.propTypes = {
|
|
inCollection: PropTypes.bool.isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
collection: PropTypes.shape({
|
|
name: PropTypes.string,
|
|
}).isRequired,
|
|
};
|
|
|
|
export default CollectionItem;
|