margin.at
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 }) {
9 const author = item.creator;
10 const collection = item.collection;
11
12 if (!author || !collection) return null;
13
14 let inner = null;
15 if (item.annotation) {
16 inner = <AnnotationCard annotation={item.annotation} />;
17 } else if (item.highlight) {
18 inner = <HighlightCard highlight={item.highlight} />;
19 } else if (item.bookmark) {
20 inner = <BookmarkCard bookmark={item.bookmark} />;
21 }
22
23 if (!inner) return null;
24
25 return (
26 <div className="collection-feed-item" style={{ marginBottom: "20px" }}>
27 <div
28 className="feed-context-header"
29 style={{
30 display: "flex",
31 alignItems: "center",
32 gap: "8px",
33 marginBottom: "8px",
34 fontSize: "14px",
35 color: "var(--text-secondary)",
36 }}
37 >
38 {author.avatar && (
39 <img
40 src={author.avatar}
41 alt={author.handle}
42 style={{
43 width: "24px",
44 height: "24px",
45 borderRadius: "50%",
46 objectFit: "cover",
47 }}
48 />
49 )}
50 <span>
51 <span style={{ fontWeight: 600, color: "var(--text-primary)" }}>
52 {author.displayName || author.handle}
53 </span>{" "}
54 added to{" "}
55 <Link
56 to={`/${author.handle}/collection/${collection.uri.split("/").pop()}`}
57 style={{
58 display: "inline-flex",
59 alignItems: "center",
60 gap: "4px",
61 fontWeight: 500,
62 color: "var(--primary)",
63 textDecoration: "none",
64 }}
65 >
66 <CollectionIcon icon={collection.icon} size={14} />
67 {collection.name}
68 </Link>
69 </span>
70 <div style={{ marginLeft: "auto" }}>
71 <ShareMenu
72 uri={collection.uri}
73 handle={author.handle}
74 type="Collection"
75 text={`Check out this collection by ${author.displayName}: ${collection.name}`}
76 />
77 </div>
78 </div>
79 <div
80 className="feed-context-body"
81 style={{
82 paddingLeft: "16px",
83 borderLeft: "2px solid var(--border-color)",
84 }}
85 >
86 {inner}
87 </div>
88 </div>
89 );
90}