(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
2.3 kB · 75 lines
JSX
at ui-refactor
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576import { Link } from "react-router-dom";import AnnotationCard, { HighlightCard } from "./AnnotationCard";import BookmarkCard from "./BookmarkCard";
import CollectionIcon from "./CollectionIcon";import ShareMenu from "./ShareMenu";
export default function CollectionItemCard({ item, onAddToCollection }) { const author = item.creator; const collection = item.collection;
if (!author || !collection) return null;
const innerItem = item.annotation || item.highlight || item.bookmark; if (!innerItem) return null;
const innerUri = innerItem.uri || innerItem.id;
return ( <div className="collection-feed-item"> <div className="collection-context-badge"> <div className="collection-context-inner"> {author.avatar && ( <img src={author.avatar} alt={author.handle} className="collection-context-avatar" /> )} <span className="collection-context-text"> <Link to={`/profile/${author.did}`} className="collection-context-author" > {author.displayName || author.handle} </Link>{" "} added to{" "} <Link to={`/${author.handle}/collection/${collection.uri.split("/").pop()}`} className="collection-context-link" > <CollectionIcon icon={collection.icon} size={14} /> {collection.name} </Link> </span> </div> <ShareMenu uri={collection.uri} handle={author.handle} type="Collection" text={`Check out this collection: ${collection.name}`} /> </div>
{item.annotation && ( <AnnotationCard annotation={item.annotation} onAddToCollection={() => onAddToCollection?.(innerUri)} /> )} {item.highlight && ( <HighlightCard highlight={item.highlight} onAddToCollection={() => onAddToCollection?.(innerUri)} /> )} {item.bookmark && ( <BookmarkCard bookmark={item.bookmark} onAddToCollection={() => onAddToCollection?.(innerUri)} /> )} </div> );}