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