(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 { ChevronRight, Edit2 } from "lucide-react";
3import CollectionIcon from "./CollectionIcon";
4
5export default function CollectionRow({ collection, onEdit }) {
6 return (
7 <div className="collection-row">
8 <Link
9 to={
10 collection.creator?.handle
11 ? `/${collection.creator.handle}/collection/${collection.uri.split("/").pop()}`
12 : `/collection/${encodeURIComponent(collection.uri)}`
13 }
14 className="collection-row-content"
15 >
16 <div className="collection-row-icon">
17 <CollectionIcon icon={collection.icon} size={22} />
18 </div>
19 <div className="collection-row-info">
20 <h3 className="collection-row-name">{collection.name}</h3>
21 {collection.description && (
22 <p className="collection-row-desc">{collection.description}</p>
23 )}
24 </div>
25 <ChevronRight size={20} className="collection-row-arrow" />
26 </Link>
27 {onEdit && !collection.uri.includes("network.cosmik") && (
28 <button
29 onClick={(e) => {
30 e.preventDefault();
31 e.stopPropagation();
32 onEdit();
33 }}
34 className="collection-row-edit"
35 title="Edit collection"
36 >
37 <Edit2 size={16} />
38 </button>
39 )}
40 </div>
41 );
42}