(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { Link } from "react-router-dom";
2import AnnotationCard, { HighlightCard } from "./AnnotationCard";
3import BookmarkCard from "./BookmarkCard";
4
5import CollectionIcon from "./CollectionIcon";
6import ShareMenu from "./ShareMenu";
7
8export default function CollectionItemCard({ item, onAddToCollection }) {
9 const author = item.creator;
10 const collection = item.collection;
11
12 if (!author || !collection) return null;
13
14 const innerItem = item.annotation || item.highlight || item.bookmark;
15 if (!innerItem) return null;
16
17 const innerUri = innerItem.uri || innerItem.id;
18
19 return (
20 <div className="collection-feed-item">
21 <div className="collection-context-badge">
22 <div className="collection-context-inner">
23 {author.avatar && (
24 <img
25 src={author.avatar}
26 alt={author.handle}
27 className="collection-context-avatar"
28 />
29 )}
30 <span className="collection-context-text">
31 <Link
32 to={`/profile/${author.did}`}
33 className="collection-context-author"
34 >
35 {author.displayName || author.handle}
36 </Link>{" "}
37 added to{" "}
38 <Link
39 to={`/${author.handle}/collection/${collection.uri.split("/").pop()}`}
40 className="collection-context-link"
41 >
42 <CollectionIcon icon={collection.icon} size={14} />
43 {collection.name}
44 </Link>
45 </span>
46 </div>
47 <ShareMenu
48 uri={collection.uri}
49 handle={author.handle}
50 type="Collection"
51 text={`Check out this collection: ${collection.name}`}
52 />
53 </div>
54
55 {item.annotation && (
56 <AnnotationCard
57 annotation={item.annotation}
58 onAddToCollection={() => onAddToCollection?.(innerUri)}
59 />
60 )}
61 {item.highlight && (
62 <HighlightCard
63 highlight={item.highlight}
64 onAddToCollection={() => onAddToCollection?.(innerUri)}
65 />
66 )}
67 {item.bookmark && (
68 <BookmarkCard
69 bookmark={item.bookmark}
70 onAddToCollection={() => onAddToCollection?.(innerUri)}
71 />
72 )}
73 </div>
74 );
75}