lbry-desktop/ui/component/collectionContentSidebar/view.jsx
saltrafael aced8fb593 Add watch later hover action and Favorites
add watch later hover action

replace watch later popup item for favorites

lint

styling for watch_later overlay

Add label

Use just claim, add requiresAuth

Add list icon

Tone down text

Turn WL Hover Button into component

Change WL hover icons

small revert

Keep watch later in the menu
2021-07-14 11:41:36 -04:00

46 lines
1.4 KiB
JavaScript

// @flow
import React from 'react';
import ClaimList from 'component/claimList';
import Card from 'component/common/card';
import Button from 'component/button';
import * as PAGES from 'constants/pages';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import { COLLECTIONS_CONSTS } from 'lbry-redux';
type Props = {
collectionUrls: Array<Claim>,
collectionName: string,
collection: any,
createUnpublishedCollection: (string, Array<any>, ?string) => void,
id: string,
claim: Claim,
isMine: boolean,
};
export default function CollectionContent(props: Props) {
const { collectionUrls, collectionName, id } = props;
return (
<Card
isBodyList
className="file-page__recommended"
title={
<span>
<Icon
icon={(id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK}
className="icon--margin-right" />
{collectionName}
</span>
}
titleActions={
<>
{/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
<Button label={'View List'} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
</>
}
body={<ClaimList isCardBody type="small" uris={collectionUrls} collectionId={id} empty={__('List is Empty')} />}
/>
);
}