4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T5d9f,"use client"; import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // One post card in three looks: a photo feed, a short-text timeline and a news feed. Same data in, // different skin out. Like, repost and save really toggle (the counts follow), and they answer with // a small pop and a ring of dots. Double-click the photo of the photo-feed card to like it. // Every icon is drawn here as a plain stroke shape, so there are no logos and no icon package. export type SocialCardVariant = "instagram" | "x" | "facebook"; export type SocialCardAuthor = { /** The display name, e.g. "Mira". */ name: string; /** The handle without the @, e.g. "mira.photo". */ handle: string; /** Address of the profile picture. When it is missing, the initials are shown. */ avatar?: string; /** Shows the verified badge. */ verified?: boolean; }; export type SocialCardProps = { /** Which look to draw: a photo feed, a short-text timeline or a news feed. */ variant?: SocialCardVariant; /** Who posted it: name, handle, profile picture and the verified badge. */ author?: SocialCardAuthor; /** The post text. #hashtags and @mentions are coloured. */ content?: string; /** Address of the photo under the text. Leave it out for a text-only post. */ image?: string; /** Alt text of the photo. */ imageAlt?: string; /** Shape of the photo as width divided by height, e.g. 1.6. 0 uses the look's own shape. */ imageRatio?: number; /** Number of likes before the visitor touches the heart. */ likes?: number; /** Number of comments. */ comments?: number; /** Number of shares (reposts on the timeline look). */ shares?: number; /** The age of the post, as text: "2h", "Mar 4". */ timestamp?: string; /** Starts the post as already liked by the visitor. */ liked?: boolean; /** Colours of the card: follow the page's dark mode, or force light or dark. */ scheme?: "auto" | "light" | "dark"; /** Called whenever the visitor likes or unlikes the post. */ onLikedChange?: (liked: boolean) => void; /** Extra classes for the card. It is as wide as its parent, up to a limit per look. */ className?: string; }; // The colours of the card as CSS variables, so the three looks share one set of rules. // "auto" uses the dark: variant of the project's Tailwind setup. const 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)]"; const 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)]"; const 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)]`; const schemes = { auto: autoScheme, light: lightScheme, dark: darkScheme }; // Per look: the widest the card gets, the colour of the verified badge and of the like pop, // and the shape of the photo const looks = { instagram: { width: "max-w-[380px]", badge: "#0095f6", pop: "#ff3b5c", ratio: 4 / 5 }, x: { width: "max-w-[560px]", badge: "#1d9bf0", pop: "#f91880", ratio: 16 / 10 }, facebook: { width: "max-w-[560px]", badge: "#1877f2", pop: "#1877f2", ratio: 16 / 10 }, } as const; const defaultAuthor: SocialCardAuthor = { name: "Alex", handle: "alex", verified: false }; // "12,480" for exact counts, "12.5K" for the compact ones on the timeline and news feed const exact = new Intl.NumberFormat("en-US"); const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }); export function SocialCard({ variant = "instagram", author = defaultAuthor, content = "", image, imageAlt = "", imageRatio = 0, likes = 0, comments = 0, shares = 0, timestamp = "now", liked: startsLiked = false, scheme = "auto", onLikedChange, className = "", }: SocialCardProps) { const rootRef = useRef(null); const [likedState, setLikedState] = useStateWithReset(startsLiked); const [repostedState, setRepostedState] = useStateWithReset(false); const [savedState, setSavedState] = useStateWithReset(false); const look = looks[variant]; // The entrance: the parts of the card settle in one after another. It plays again when the look // changes, because the markup underneath is new. const { contextSafe } = useGSAP( () => { const root = rootRef.current; if (!root || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; gsap.from(root.querySelectorAll("[data-in]"), { opacity: 0, y: 14, duration: 0.7, ease: "power3.out", stagger: 0.07, clearProps: "opacity,transform" }); }, { scope: rootRef, dependencies: [variant], revertOnUpdate: true }, ); // The small pop of an icon, and for a like also a ring of dots flying out const pop = contextSafe((name: "like" | "repost" | "save") => { const root = rootRef.current; if (!root || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const icon = root.querySelector(`[data-pop="${name}"]`); 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 }); if (name !== "like") return; const dots = root.querySelectorAll("[data-dot]"); gsap.fromTo( dots, { x: 0, y: 0, scale: 0.9, opacity: 1 }, { 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 }, ); }); const setLiked = (next: boolean) => { setLikedState(next); onLikedChange?.(next); if (next) pop("like"); }; const toggleLike = () => setLiked(!likedState); const toggleRepost = () => { setRepostedState(!repostedState); if (!repostedState) pop("repost"); }; const toggleSave = () => { setSavedState(!savedState); if (!savedState) pop("save"); }; // Double-click on the photo: like it (never un-like) and show a big heart over it const likeFromPhoto = contextSafe(() => { const root = rootRef.current; const heart = root?.querySelector("[data-bigheart]"); if (heart && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) { gsap .timeline({ overwrite: true }) .fromTo(heart, { scale: 0.3, opacity: 0, y: 0 }, { scale: 1.1, opacity: 1, duration: 0.35, ease: "back.out(2.2)" }) .to(heart, { scale: 1, duration: 0.12 }) .to(heart, { opacity: 0, y: -26, scale: 1.2, duration: 0.45, ease: "power2.in" }, "+=0.18"); } if (!likedState) setLiked(true); }); // The visitor's own like and repost add one to the numbers they were given const view: View = { author, content, image, imageAlt, ratio: imageRatio > 0 ? imageRatio : look.ratio, likes: likes + (likedState ? 1 : 0) - (startsLiked ? 1 : 0), comments, shares: shares + (repostedState ? 1 : 0), timestamp, liked: likedState, reposted: repostedState, saved: savedState, badge: look.badge, toggleLike, toggleRepost, toggleSave, likeFromPhoto, }; const rootStyle = { "--sc-pop": look.pop, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" } as CSSProperties; return (

{variant === "instagram" && } {variant === "x" && } {variant === "facebook" && }

); } // --------------------------------------------------------------------------------------------- // State that starts from a prop and follows it when the prop changes (the playground flips it) // --------------------------------------------------------------------------------------------- function useStateWithReset(value: boolean) { const [state, setState] = useState(value); useEffect(() => setState(value), [value]); return [state, setState] as const; } // --------------------------------------------------------------------------------------------- // The three looks // --------------------------------------------------------------------------------------------- type View = { author: SocialCardAuthor; content: string; image?: string; imageAlt: string; ratio: number; likes: number; comments: number; shares: number; timestamp: string; liked: boolean; reposted: boolean; saved: boolean; badge: string; toggleLike: () => void; toggleRepost: () => void; toggleSave: () => void; likeFromPhoto: () => void; }; function PhotoFeed(v: View) { return ( <>

{v.author.handle} {v.author.verified && } · {v.timestamp}

{v.image && (

)}

{exact.format(v.likes)} likes

{v.content && (

{v.author.handle}

)} {v.comments > 0 &&

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

}

); } function Timeline(v: View) { const actionClass = "group flex cursor-pointer items-center gap-0.5 text-[var(--sc-muted)] transition-colors focus-visible:outline-2"; // The round tint that blooms behind an icon on hover const bloom = "grid h-[34px] w-[34px] place-items-center rounded-full transition-colors"; return (

{v.author.name} {v.author.verified && } @{v.author.handle} · {v.timestamp}

{v.content && (

)} {v.image && (

)}

); } function NewsFeed(v: View) { 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"; return ( <>

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

{v.timestamp} ·

{v.content && (

)} {v.image && (

)}

{compact.format(v.likes)} {compact.format(v.comments)} comments · {compact.format(v.shares)} shares

); } // --------------------------------------------------------------------------------------------- // Small parts // --------------------------------------------------------------------------------------------- function LikeButton({ v, size, className = "" }: { v: View; size: number; className?: string }) { return ( ); } /** Eight dots in the middle of a button. The like pop flies them outwards. */ function Dots() { return ( {Array.from({ length: 8 }, (_, i) => ( ))} ); } function IconButton({ label, className = "", children }: { label: string; className?: string; children: ReactNode }) { return ( ); } function Avatar({ author, size }: { author: SocialCardAuthor; size: number }) { const box = { width: size, height: size } as const; if (author.avatar) return

; const initials = author.name .split(/\s+/) .map((word) => word[0] ?? "") .join("") .slice(0, 2) .toUpperCase(); return ( {initials} ); } /** The verified badge: a plain scalloped seal with a tick, drawn from two rounded squares */ function Seal({ color, size }: { color: string; size: number }) { return ( ); } /** Text with #hashtags and @mentions picked out in the look's accent colour */ function RichText({ text, color }: { text: string; color: string }) { return ( <> {text.split(/([#@][\p{L}\p{N}_.]*[\p{L}\p{N}_])/u).map((part, i) => /^[#@]/.test(part) ? ( {part} ) : ( part ), )} ); } const 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"; const paths = { heart: heartPath, 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", send: "M21.5 3 10.6 13.9M21.5 3l-6.8 18-4.1-7.1L3.5 9.8z", bookmark: "M6.5 3.5h11v17.2L12 16.5l-5.5 4.2z", 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", 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", 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", } as const; type IconName = keyof typeof paths | "more" | "globe"; function Icon({ name, size, fill = false }: { name: IconName; size: number; fill?: boolean }) { const common = { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true as const, className: "block" }; if (name === "more") { return ( ); } if (name === "globe") { return ( ); } return ( ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/social-card/social-card.tsx","content":"$50","type":"registry:component","target":"components/dimaac/social-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]