import { Collection } from '@semble/types'; import OpenGraphCard from './OpenGraphCard'; import CollectionCollage from './CollectionCollage'; import { CollageTile } from '../../lib/utils/collage'; import { abbreviateNumber, truncateText } from '@/lib/utils/text'; import { CollectionAccessType } from '@semble/types'; interface Props { collection: Collection; tiles: CollageTile[]; } export default async function CollectionOpenGraph(props: Props) { const { collection, tiles } = props; const metadata = (

{/* label */}

{collection.accessType === CollectionAccessType.OPEN && ( )}

Collection

{/* collection name */}

{collection.name}

{/* collection description */} {collection.description && (

{collection.description}

)}

{collection.cardCount > 0 && (

{/* FaRegNoteSticky icon (navbar "Cards"); 448x512 viewBox, so width is scaled to keep the aspect ratio. Height is 28 (not the followers icon's 36) because the sticky-note glyph fills far more of its viewBox than the people glyph does — at 28 the rendered glyph is 24px tall, matching the followers icon. */}

{abbreviateNumber(collection.cardCount)}

{collection.cardCount > 1 ? 'cards' : 'card'}

)} {collection.followerCount !== undefined && (

{/* MdOutlinePeopleAlt icon */}

{abbreviateNumber(collection.followerCount)}

{collection.followerCount === 1 ? 'follower' : 'followers'}

)}

{/* Author Info */}

{collection.author.avatarUrl && ( {`${collection.author.handle}'s

)}

@{truncateText(collection.author.handle, 35)}

); return await OpenGraphCard({ children: tiles.length > 0 ? (

{metadata}

) : (

{metadata}

), }); }