{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"social-card","type":"registry:component","title":"Social Card","description":"A realistic post card in three looks: photo feed, short-text timeline and news feed.","author":"DiMaac (HankTheTank) ","dependencies":["gsap","@gsap/react"],"files":[{"path":"registry/dimaac/social-card/social-card.tsx","type":"registry:component","target":"components/dimaac/social-card.tsx","content":"\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { gsap } from \"gsap\";\nimport { useGSAP } from \"@gsap/react\";\n\n// One post card in three looks: a photo feed, a short-text timeline and a news feed. Same data in,\n// different skin out. Like, repost and save really toggle (the counts follow), and they answer with\n// a small pop and a ring of dots. Double-click the photo of the photo-feed card to like it.\n// Every icon is drawn here as a plain stroke shape, so there are no logos and no icon package.\n\nexport type SocialCardVariant = \"instagram\" | \"x\" | \"facebook\";\n\nexport type SocialCardAuthor = {\n /** The display name, e.g. \"Mira\". */\n name: string;\n /** The handle without the @, e.g. \"mira.photo\". */\n handle: string;\n /** Address of the profile picture. When it is missing, the initials are shown. */\n avatar?: string;\n /** Shows the verified badge. */\n verified?: boolean;\n};\n\nexport type SocialCardProps = {\n /** Which look to draw: a photo feed, a short-text timeline or a news feed. */\n variant?: SocialCardVariant;\n /** Who posted it: name, handle, profile picture and the verified badge. */\n author?: SocialCardAuthor;\n /** The post text. #hashtags and @mentions are coloured. */\n content?: string;\n /** Address of the photo under the text. Leave it out for a text-only post. */\n image?: string;\n /** Alt text of the photo. */\n imageAlt?: string;\n /** Shape of the photo as width divided by height, e.g. 1.6. 0 uses the look's own shape. */\n imageRatio?: number;\n /** Number of likes before the visitor touches the heart. */\n likes?: number;\n /** Number of comments. */\n comments?: number;\n /** Number of shares (reposts on the timeline look). */\n shares?: number;\n /** The age of the post, as text: \"2h\", \"Mar 4\". */\n timestamp?: string;\n /** Starts the post as already liked by the visitor. */\n liked?: boolean;\n /** Colours of the card: follow the page's dark mode, or force light or dark. */\n scheme?: \"auto\" | \"light\" | \"dark\";\n /** Called whenever the visitor likes or unlikes the post. */\n onLikedChange?: (liked: boolean) => void;\n /** Extra classes for the card. It is as wide as its parent, up to a limit per look. */\n className?: string;\n};\n\n// The colours of the card as CSS variables, so the three looks share one set of rules.\n// \"auto\" uses the dark: variant of the project's Tailwind setup.\nconst lightScheme = \"[--sc-bg:#ffffff] [--sc-fg:#0f1419] [--sc-muted:#5d6872] [--sc-line:rgba(15,20,25,0.11)] [--sc-hover:rgba(15,20,25,0.06)] [--sc-shadow:rgba(30,40,60,0.28)]\";\nconst darkScheme = \"[--sc-bg:#16181b] [--sc-fg:#eef0f2] [--sc-muted:#8d97a1] [--sc-line:rgba(255,255,255,0.11)] [--sc-hover:rgba(255,255,255,0.07)] [--sc-shadow:rgba(0,0,0,0.7)]\";\nconst autoScheme = `${lightScheme} dark:[--sc-bg:#16181b] dark:[--sc-fg:#eef0f2] dark:[--sc-muted:#8d97a1] dark:[--sc-line:rgba(255,255,255,0.11)] dark:[--sc-hover:rgba(255,255,255,0.07)] dark:[--sc-shadow:rgba(0,0,0,0.7)]`;\nconst schemes = { auto: autoScheme, light: lightScheme, dark: darkScheme };\n\n// Per look: the widest the card gets, the colour of the verified badge and of the like pop,\n// and the shape of the photo\nconst looks = {\n instagram: { width: \"max-w-[380px]\", badge: \"#0095f6\", pop: \"#ff3b5c\", ratio: 4 / 5 },\n x: { width: \"max-w-[560px]\", badge: \"#1d9bf0\", pop: \"#f91880\", ratio: 16 / 10 },\n facebook: { width: \"max-w-[560px]\", badge: \"#1877f2\", pop: \"#1877f2\", ratio: 16 / 10 },\n} as const;\n\nconst defaultAuthor: SocialCardAuthor = { name: \"Alex\", handle: \"alex\", verified: false };\n\n// \"12,480\" for exact counts, \"12.5K\" for the compact ones on the timeline and news feed\nconst exact = new Intl.NumberFormat(\"en-US\");\nconst compact = new Intl.NumberFormat(\"en-US\", { notation: \"compact\", maximumFractionDigits: 1 });\n\nexport function SocialCard({\n variant = \"instagram\",\n author = defaultAuthor,\n content = \"\",\n image,\n imageAlt = \"\",\n imageRatio = 0,\n likes = 0,\n comments = 0,\n shares = 0,\n timestamp = \"now\",\n liked: startsLiked = false,\n scheme = \"auto\",\n onLikedChange,\n className = \"\",\n}: SocialCardProps) {\n const rootRef = useRef(null);\n const [likedState, setLikedState] = useStateWithReset(startsLiked);\n const [repostedState, setRepostedState] = useStateWithReset(false);\n const [savedState, setSavedState] = useStateWithReset(false);\n const look = looks[variant];\n\n // The entrance: the parts of the card settle in one after another. It plays again when the look\n // changes, because the markup underneath is new.\n const { contextSafe } = useGSAP(\n () => {\n const root = rootRef.current;\n if (!root || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n gsap.from(root.querySelectorAll(\"[data-in]\"), { opacity: 0, y: 14, duration: 0.7, ease: \"power3.out\", stagger: 0.07, clearProps: \"opacity,transform\" });\n },\n { scope: rootRef, dependencies: [variant], revertOnUpdate: true },\n );\n\n // The small pop of an icon, and for a like also a ring of dots flying out\n const pop = contextSafe((name: \"like\" | \"repost\" | \"save\") => {\n const root = rootRef.current;\n if (!root || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const icon = root.querySelector(`[data-pop=\"${name}\"]`);\n if (icon) gsap.fromTo(icon, { scale: 0.5, rotate: variant === \"facebook\" && name === \"like\" ? -24 : 0 }, { scale: 1, rotate: 0, duration: 0.75, ease: \"elastic.out(1.1, 0.4)\", overwrite: true });\n if (name !== \"like\") return;\n const dots = root.querySelectorAll(\"[data-dot]\");\n gsap.fromTo(\n dots,\n { x: 0, y: 0, scale: 0.9, opacity: 1 },\n { x: (i) => Math.cos((i / dots.length) * Math.PI * 2) * 17, y: (i) => Math.sin((i / dots.length) * Math.PI * 2) * 17, scale: 0, opacity: 0, duration: 0.6, ease: \"power2.out\", overwrite: true },\n );\n });\n\n const setLiked = (next: boolean) => {\n setLikedState(next);\n onLikedChange?.(next);\n if (next) pop(\"like\");\n };\n const toggleLike = () => setLiked(!likedState);\n const toggleRepost = () => {\n setRepostedState(!repostedState);\n if (!repostedState) pop(\"repost\");\n };\n const toggleSave = () => {\n setSavedState(!savedState);\n if (!savedState) pop(\"save\");\n };\n\n // Double-click on the photo: like it (never un-like) and show a big heart over it\n const likeFromPhoto = contextSafe(() => {\n const root = rootRef.current;\n const heart = root?.querySelector(\"[data-bigheart]\");\n if (heart && !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n gsap\n .timeline({ overwrite: true })\n .fromTo(heart, { scale: 0.3, opacity: 0, y: 0 }, { scale: 1.1, opacity: 1, duration: 0.35, ease: \"back.out(2.2)\" })\n .to(heart, { scale: 1, duration: 0.12 })\n .to(heart, { opacity: 0, y: -26, scale: 1.2, duration: 0.45, ease: \"power2.in\" }, \"+=0.18\");\n }\n if (!likedState) setLiked(true);\n });\n\n // The visitor's own like and repost add one to the numbers they were given\n const view: View = {\n author,\n content,\n image,\n imageAlt,\n ratio: imageRatio > 0 ? imageRatio : look.ratio,\n likes: likes + (likedState ? 1 : 0) - (startsLiked ? 1 : 0),\n comments,\n shares: shares + (repostedState ? 1 : 0),\n timestamp,\n liked: likedState,\n reposted: repostedState,\n saved: savedState,\n badge: look.badge,\n toggleLike,\n toggleRepost,\n toggleSave,\n likeFromPhoto,\n };\n\n const rootStyle = { \"--sc-pop\": look.pop, fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\" } as CSSProperties;\n\n return (\n \n {variant === \"instagram\" && }\n {variant === \"x\" && }\n {variant === \"facebook\" && }\n \n );\n}\n\n// ---------------------------------------------------------------------------------------------\n// State that starts from a prop and follows it when the prop changes (the playground flips it)\n// ---------------------------------------------------------------------------------------------\n\nfunction useStateWithReset(value: boolean) {\n const [state, setState] = useState(value);\n useEffect(() => setState(value), [value]);\n return [state, setState] as const;\n}\n\n// ---------------------------------------------------------------------------------------------\n// The three looks\n// ---------------------------------------------------------------------------------------------\n\ntype View = {\n author: SocialCardAuthor;\n content: string;\n image?: string;\n imageAlt: string;\n ratio: number;\n likes: number;\n comments: number;\n shares: number;\n timestamp: string;\n liked: boolean;\n reposted: boolean;\n saved: boolean;\n badge: string;\n toggleLike: () => void;\n toggleRepost: () => void;\n toggleSave: () => void;\n likeFromPhoto: () => void;\n};\n\nfunction PhotoFeed(v: View) {\n return (\n <>\n
\n \n \n \n \n \n
\n {v.author.handle}\n {v.author.verified && }\n ·\n {v.timestamp}\n
\n \n \n \n
\n\n {v.image && (\n
\n {v.imageAlt}\n \n \n \n
\n )}\n\n
\n \n \n \n \n \n \n \n \n
\n\n
\n

{exact.format(v.likes)} likes

\n {v.content && (\n

\n {v.author.handle}\n \n

\n )}\n {v.comments > 0 &&

View all {exact.format(v.comments)} comments

}\n
\n \n );\n}\n\nfunction Timeline(v: View) {\n const actionClass = \"group flex cursor-pointer items-center gap-0.5 text-[var(--sc-muted)] transition-colors focus-visible:outline-2\";\n // The round tint that blooms behind an icon on hover\n const bloom = \"grid h-[34px] w-[34px] place-items-center rounded-full transition-colors\";\n return (\n
\n
\n \n
\n
\n
\n {v.author.name}\n {v.author.verified && }\n @{v.author.handle}\n ·\n {v.timestamp}\n \n \n \n
\n\n {v.content && (\n

\n \n

\n )}\n\n {v.image && (\n
\n {v.imageAlt}\n
\n )}\n\n
\n \n \n \n \n \n
\n
\n
\n );\n}\n\nfunction NewsFeed(v: View) {\n const action = \"flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg py-2 text-[14px] font-semibold text-[var(--sc-muted)] transition-colors hover:bg-[var(--sc-hover)] focus-visible:outline-2\";\n return (\n <>\n
\n \n
\n

\n {v.author.name}\n {v.author.verified && }\n

\n

\n {v.timestamp}\n ·\n \n

\n
\n \n \n \n
\n\n {v.content && (\n

\n \n

\n )}\n\n {v.image && (\n
\n {v.imageAlt}\n
\n )}\n\n
\n \n \n \n {compact.format(v.likes)}\n \n {compact.format(v.comments)} comments · {compact.format(v.shares)} shares\n \n
\n\n
\n \n \n \n
\n
\n \n );\n}\n\n// ---------------------------------------------------------------------------------------------\n// Small parts\n// ---------------------------------------------------------------------------------------------\n\nfunction LikeButton({ v, size, className = \"\" }: { v: View; size: number; className?: string }) {\n return (\n \n );\n}\n\n/** Eight dots in the middle of a button. The like pop flies them outwards. */\nfunction Dots() {\n return (\n \n {Array.from({ length: 8 }, (_, i) => (\n \n ))}\n \n );\n}\n\nfunction IconButton({ label, className = \"\", children }: { label: string; className?: string; children: ReactNode }) {\n return (\n \n );\n}\n\nfunction Avatar({ author, size }: { author: SocialCardAuthor; size: number }) {\n const box = { width: size, height: size } as const;\n if (author.avatar) return {author.name};\n const initials = author.name\n .split(/\\s+/)\n .map((word) => word[0] ?? \"\")\n .join(\"\")\n .slice(0, 2)\n .toUpperCase();\n return (\n \n {initials}\n \n );\n}\n\n/** The verified badge: a plain scalloped seal with a tick, drawn from two rounded squares */\nfunction Seal({ color, size }: { color: string; size: number }) {\n return (\n \n \n \n \n \n );\n}\n\n/** Text with #hashtags and @mentions picked out in the look's accent colour */\nfunction RichText({ text, color }: { text: string; color: string }) {\n return (\n <>\n {text.split(/([#@][\\p{L}\\p{N}_.]*[\\p{L}\\p{N}_])/u).map((part, i) =>\n /^[#@]/.test(part) ? (\n \n {part}\n \n ) : (\n part\n ),\n )}\n \n );\n}\n\nconst heartPath = \"M12 21s-7.6-4.7-9.4-9.4C1.4 8.4 3.2 5 6.7 5c2.1 0 3.6 1.1 5.3 3.3C13.7 6.1 15.2 5 17.3 5c3.5 0 5.3 3.4 4.1 6.6C19.6 16.3 12 21 12 21z\";\n\nconst paths = {\n heart: heartPath,\n comment: \"M21 11.5a8.5 8.5 0 0 1-12.4 7.6L3 20.6l1.5-5.1A8.5 8.5 0 1 1 21 11.5z\",\n send: \"M21.5 3 10.6 13.9M21.5 3l-6.8 18-4.1-7.1L3.5 9.8z\",\n bookmark: \"M6.5 3.5h11v17.2L12 16.5l-5.5 4.2z\",\n repost: \"M17 3l4 4-4 4M3 11V9.5A2.5 2.5 0 0 1 5.5 7H21M7 21l-4-4 4-4M21 13v1.5a2.5 2.5 0 0 1-2.5 2.5H3\",\n share: \"M12 15V3.5M7.5 8 12 3.5 16.5 8M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6\",\n thumb: \"M7.5 10.5V21H3.5V10.5zM7.5 10.5 11.4 3c1.6 0 2.6 1.3 2.3 2.8L13.1 9H19a2 2 0 0 1 2 2.4l-1.4 7.2a2 2 0 0 1-2 1.6H7.5\",\n} as const;\n\ntype IconName = keyof typeof paths | \"more\" | \"globe\";\n\nfunction Icon({ name, size, fill = false }: { name: IconName; size: number; fill?: boolean }) {\n const common = { width: size, height: size, viewBox: \"0 0 24 24\", \"aria-hidden\": true as const, className: \"block\" };\n if (name === \"more\") {\n return (\n \n \n \n \n \n );\n }\n if (name === \"globe\") {\n return (\n \n \n \n \n );\n }\n return (\n \n \n \n );\n}\n"}],"categories":["cards","gsap","card","social","post","like","feed"],"docs":"import { SocialCard } from \"@/components/dimaac/social-card\". Give its parent a size: it fills it. Docs, playground and props: https://ui.dimaac.com/components/social-card","meta":{"tier":"free","preview":"https://ui.dimaac.com/components/social-card","credits":[{"by":"rena","url":"https://www.lummi.ai/photo/modern-architectural-design-aozka","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Benginur Hajjaj","url":"https://www.lummi.ai/photo/calm-portrait-d1zqo","what":"Profile picture","source":"Lummi","licence":"Lummi License"}]}}