{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "social-post-shadcn", "title": "Social Post (shadcn-native)", "author": "Lloyd Humphreys", "description": "EXPERIMENTAL — the API is still settling and will change in breaking ways; pin what you install. The platform-neutral social post embed card composed shadcn-natively: your app's actual / (installed as a registry dependency) for the avatar-with-fallback, Tailwind theme tokens for every color, lucide icons (BadgeCheckIcon for the neutral verified badge, ArrowUpRightIcon on the 'Source' link, UserRoundIcon as the avatar fallback), cn. Same data model, outline/filled variants, and entity tinting (inert @mention/#hashtag/URL spans, never anchors) as social-post — a compound SocialPost / SocialPostHeader / SocialPostContent / SocialPostMedia / SocialPostFooter composition, with SocialPost itself doubling as the data-driven entry point. Self-contained in one file (the entity detection is re-typed inline, not imported).", "dependencies": [ "lucide-react" ], "registryDependencies": [ "avatar" ], "files": [ { "path": "registry/social-post/social-post-shadcn.tsx", "content": "// social-post-shadcn — the platform-neutral social post embed card, composed\n// shadcn-natively.\n//\n// EXPERIMENTAL — the API is still settling and will change in breaking ways; pin what you\n// install.\n//\n// Same model as the vanilla `social-post` (an embedded-tweet-shaped quotation card with\n// no platform branding: every field passed in as data, nothing fetched), but built from\n// your app's actual pieces: your `` (installed as a registry dependency) for the\n// avatar-with-fallback, Tailwind theme tokens for every color, lucide icons for the\n// verified badge / footer arrow / avatar silhouette. Inside a shadcn app it matches your\n// theme untouched.\n//\n// \n//\n// `SocialPost` is both the root part and the data-driven entry point — it composes\n// SocialPostHeader / SocialPostContent / SocialPostMedia / SocialPostFooter internally.\n// Those parts are exported too: to rearrange the anatomy, compose them yourself inside\n// your own
.\n//\n// The footer link is deliberately the only interactive element — the card is a\n// quotation, not a button, so its text stays selectable. @mentions, #hashtags, and URLs\n// in the content are tinted as inert spans, never anchors. The verified badge keeps\n// --foreground color on purpose: the shape says \"verified\", the neutral color keeps it\n// from reading as any platform's brand check.\n//\n// Self-contained on purpose: the entity detection is inlined rather than imported from\n// the vanilla core, so this file installs alone. See social-post.ts for the annotated\n// reference implementation — the segmentation semantics here are identical.\n\n'use client'\n\nimport { useMemo } from 'react'\nimport type { ComponentProps } from 'react'\nimport { ArrowUpRightIcon, BadgeCheckIcon, UserRoundIcon } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { cn } from '@/lib/utils'\n\n// ── Entities ───────────────────────────────────────────────────────────────────────────\n\ntype SocialPostEntityKind = 'mention' | 'hashtag' | 'url'\n\ninterface SocialPostSegment {\n /** null for plain text between entities. */\n kind: SocialPostEntityKind | null\n text: string\n}\n\n// Alternation order matters: at any position the URL branch wins, so a URL's own\n// #fragment or ?q=@x is consumed whole and never re-matched as a hashtag/mention. The\n// lookbehinds require a non-word boundary, which is what keeps bob@x.com from tagging @x.\n// Only explicit http(s):// URLs are detected (no bare domains); mentions accept fediverse\n// form (@user@instance.tld); unicode hashtags work. Single bounded scan per alternative —\n// no backtracking blow-up.\nconst ENTITY_RE =\n /(https?:\\/\\/[^\\s<>\"']+)|(? opens) {\n url = url.slice(0, -1)\n continue\n }\n }\n return url\n }\n}\n\n/** Split post text into plain runs and mention/hashtag/URL entities, in order. */\nfunction splitContentEntities(content: string): SocialPostSegment[] {\n const segments: SocialPostSegment[] = []\n let last = 0\n for (const m of content.matchAll(ENTITY_RE)) {\n const start = m.index\n let text = m[0]\n const kind: SocialPostEntityKind = m[1] ? 'url' : m[2] ? 'mention' : 'hashtag'\n if (kind === 'url') text = trimTrailingPunctuation(text)\n if (start > last) segments.push({ kind: null, text: content.slice(last, start) })\n segments.push({ kind, text })\n // The scan resumes after the *untrimmed* match, so a trimmed URL tail lands in the\n // next plain segment naturally.\n last = start + text.length\n }\n if (last < content.length) segments.push({ kind: null, text: content.slice(last) })\n return segments\n}\n\n// ── Card ───────────────────────────────────────────────────────────────────────────────\n\ninterface SocialPostLabels {\n /** Accessible name of the card. Default `Post by ${name} (@${handle})`. */\n root?: string\n /** Footer link text. Default 'Source'. */\n source?: string\n /** Accessible label of the verified badge. Default 'Verified'. */\n verified?: string\n}\n\nconst stripAt = (handle: string) => handle.replace(/^@/, '')\n\nfunction normalizeImages(images: string[] | undefined): string[] {\n if (!images) return []\n if (images.length <= 4) return images\n console.warn('social-post: more than 4 images — rendering the first 4.')\n return images.slice(0, 4)\n}\n\ninterface SocialPostProps extends Omit, 'content' | 'children'> {\n /** Display name, e.g. 'Ada Lovelace'. */\n name: string\n /** Bare handle without the leading '@' — the card prepends it. */\n handle: string\n /** The post text. Line breaks are preserved; entities are tinted as inert spans. */\n content: string\n /** Avatar image URL. Omitted or dead, the silhouette fallback shows instead. */\n avatarUrl?: string\n /** 0–4 image URLs for the media grid; more than 4 are truncated with a console.warn. */\n images?: string[]\n /** Href of the original post — the footer's \"View original ↗\", the card's only link. */\n link: string\n /** Preformatted display string — rendered verbatim, never parsed. */\n date?: string\n /** Show the neutral-colored check badge after the name. */\n verified?: boolean\n /** 'outline' (default): a bordered card on bg-card. 'filled': the same geometry on a\n * borderless bg-muted fill — the border stays transparent rather than removed, so\n * nothing shifts by a pixel when variants mix. */\n variant?: 'outline' | 'filled'\n labels?: SocialPostLabels\n}\n\n/** The card: header, tinted content, media grid, footer — all from the data props. Also\n * the root part for manual composition (or roll your own
from the parts). */\nfunction SocialPost({\n name,\n handle,\n content,\n avatarUrl,\n images,\n link,\n date,\n verified = false,\n variant = 'outline',\n labels,\n className,\n ...props\n}: SocialPostProps) {\n return (\n \n \n \n \n \n
\n )\n}\n\ninterface SocialPostHeaderProps extends Omit, 'children'> {\n name: string\n handle: string\n avatarUrl?: string\n verified?: boolean\n verifiedLabel?: string\n}\n\nfunction SocialPostHeader({\n name,\n handle,\n avatarUrl,\n verified = false,\n verifiedLabel,\n className,\n ...props\n}: SocialPostHeaderProps) {\n return (\n
\n {/* Decorative — the name and handle beside it carry the identity as text. Radix's\n load-status state machine is exactly the \"missing or dead URL → fallback\"\n behavior the vanilla core hand-rolls. */}\n \n {avatarUrl ? : null}\n \n \n \n \n \n \n \n {name}\n \n {verified ? (\n \n \n {verifiedLabel ?? 'Verified'}\n \n ) : null}\n \n \n @{stripAt(handle)}\n \n \n
\n )\n}\n\ninterface SocialPostContentProps extends Omit, 'content' | 'children'> {\n content: string\n}\n\nfunction SocialPostContent({ content, className, ...props }: SocialPostContentProps) {\n const segments = useMemo(() => splitContentEntities(content), [content])\n return (\n \n {segments.map((seg, i) =>\n seg.kind ? (\n // Tint plus a slight weight bump: in themes where --primary sits near\n // --foreground (default zinc), color alone wouldn't read. Inert on purpose —\n // no underline, no cursor, never an anchor.\n \n {seg.text}\n \n ) : (\n seg.text\n ),\n )}\n

\n )\n}\n\ninterface SocialPostMediaProps extends Omit, 'children'> {\n /** 0–4 image URLs; more than 4 are truncated with a console.warn. Renders nothing\n * when empty. */\n images?: string[]\n}\n\n/** One fixed 16:9 frame regardless of image count — only the internal grid template\n * varies (1 full, 2 columns, 3 tall + stacked, 4 in a 2×2), so every card with media\n * keeps identical proportions. The container's bg-border paints the seams. */\nfunction SocialPostMedia({ images, className, ...props }: SocialPostMediaProps) {\n const shown = normalizeImages(images)\n if (shown.length === 0) return null\n return (\n = 2 && 'grid-cols-2',\n shown.length >= 3 && 'grid-rows-2',\n className,\n )}\n {...props}\n >\n {shown.map((src, i) => (\n \n ))}\n \n )\n}\n\ninterface SocialPostFooterProps extends Omit, 'children'> {\n /** Preformatted display string — rendered verbatim, never parsed. */\n date?: string\n link: string\n sourceLabel?: string\n}\n\nfunction SocialPostFooter({ date, link, sourceLabel, className, ...props }: SocialPostFooterProps) {\n return (\n \n {date ? (\n \n {date}\n \n ) : null}\n \n {sourceLabel ?? 'Source'}\n \n \n \n )\n}\n\nexport {\n type SocialPostEntityKind,\n type SocialPostSegment,\n splitContentEntities,\n type SocialPostLabels,\n type SocialPostProps,\n SocialPost,\n type SocialPostHeaderProps,\n SocialPostHeader,\n type SocialPostContentProps,\n SocialPostContent,\n type SocialPostMediaProps,\n SocialPostMedia,\n type SocialPostFooterProps,\n SocialPostFooter,\n}\n", "type": "registry:component", "target": "components/social-post/social-post-shadcn.tsx" } ], "type": "registry:component" }