{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"post-swiper","type":"registry:component","title":"Post Swiper","description":"A deck of social posts you swipe through, card by card.","author":"DiMaac (HankTheTank) ","dependencies":["swiper","lucide-react"],"files":[{"path":"registry/dimaac/post-swiper/post-swiper.tsx","type":"registry:component","target":"components/dimaac/post-swiper.tsx","content":"\"use client\";\n\nimport { useEffect, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport { A11y, Autoplay, EffectCards, Keyboard } from \"swiper/modules\";\nimport type { Swiper as SwiperInstance } from \"swiper\";\nimport { ArrowLeft, ArrowRight, BadgeCheck, Bookmark, ChartNoAxesColumn, Ellipsis, Globe, Heart, MessageCircle, Repeat2, Send, Share, ThumbsUp } from \"lucide-react\";\nimport \"swiper/css\";\nimport \"swiper/css/effect-cards\";\nimport \"swiper/css/a11y\";\n\n// A deck of social posts you swipe through. Swiper's \"cards\" effect does the stacking and the\n// drag; the posts are three small card looks (a short-text post, a photo-first post and a\n// feed post with actions) so one deck can mix them. Each card has working like and save buttons.\n\nexport type SocialPost = {\n /** A stable key for the post. */\n id: string;\n /** Which card look to use: \"x\" (short text post), \"facebook\" (feed post) or \"instagram\" (photo post). */\n platform: \"x\" | \"facebook\" | \"instagram\";\n /** The author's display name. */\n name: string;\n /** The author's handle without the @ (used by the \"x\" look). */\n handle?: string;\n /** URL of the author's round profile photo. */\n avatar: string;\n /** When it was posted, as short text: \"1h\", \"Yesterday\". */\n time: string;\n /** Shows the verified badge next to the name. */\n verified?: boolean;\n /** The post text. */\n text?: string;\n /** URL of the post's photo. It fills the space the text leaves. */\n image?: string;\n /** Describes the photo for screen readers. */\n imageAlt?: string;\n /** Your own picture area in place of `image`: a quote card, a chart, anything. It fills the same space. */\n media?: ReactNode;\n /** The like count. The like button adds one. */\n likes?: number;\n /** The comment count. */\n comments?: number;\n /** The share or repost count. */\n shares?: number;\n};\n\nexport type PostSwiperProps = {\n /** The posts, front card first. Four to ten work best. */\n posts: SocialPost[];\n /** Wraps around: the last card is followed by the first. Needs at least three posts. */\n loop?: boolean;\n /** Shows a grab cursor over the deck. */\n grabCursor?: boolean;\n /** Seconds between automatic swipes. 0 turns autoplay off. It pauses while the pointer is over the deck. */\n autoplayDelay?: number;\n /** How much each card behind the front one is turned, in degrees. */\n tilt?: number;\n /** How far each card behind the front one sits out from it, in pixels. */\n spread?: number;\n /** Darkens the cards behind the front one, for depth. */\n shadows?: boolean;\n /** Card colours: \"dark\" or \"light\". */\n appearance?: \"dark\" | \"light\";\n /** The card width in pixels. It shrinks to fit a narrow screen. */\n cardWidth?: number;\n /** Card width divided by card height. Lower is taller. */\n cardRatio?: number;\n /** Shows the arrow buttons and the counter under the deck. */\n showNav?: boolean;\n /** The name screen readers give the deck. */\n label?: string;\n /** Extra classes for the outer box. */\n className?: string;\n /** Extra classes for each card, e.g. a different radius. */\n cardClassName?: string;\n};\n\n// Colours of the two card looks. The card reads them as CSS variables, so a change here is the only edit.\nconst palettes: Record, CSSProperties> = {\n dark: { \"--pc-bg\": \"#202224\", \"--pc-text\": \"#f1f2f3\", \"--pc-muted\": \"#9ea3a9\", \"--pc-line\": \"rgba(255,255,255,0.1)\", \"--pc-hover\": \"rgba(255,255,255,0.07)\" } as CSSProperties,\n light: { \"--pc-bg\": \"#ffffff\", \"--pc-text\": \"#14171a\", \"--pc-muted\": \"#667078\", \"--pc-line\": \"rgba(20,23,26,0.12)\", \"--pc-hover\": \"rgba(20,23,26,0.06)\" } as CSSProperties,\n};\n\nconst compact = new Intl.NumberFormat(\"en\", { notation: \"compact\", maximumFractionDigits: 1 });\nconst full = new Intl.NumberFormat(\"en\");\n\n// A quick scale pop on the icon that was pressed. The Web Animations API cleans itself up and\n// needs no library. Skipped when the visitor prefers reduced motion.\nfunction pop(element: Element | null) {\n if (!element || typeof element.animate !== \"function\") return;\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n element.animate([{ transform: \"scale(1)\" }, { transform: \"scale(1.35)\" }, { transform: \"scale(1)\" }], { duration: 320, easing: \"cubic-bezier(0.34, 1.56, 0.64, 1)\" });\n}\n\nexport function PostSwiper({\n posts,\n loop = true,\n grabCursor = true,\n autoplayDelay = 0,\n tilt = 2,\n spread = 10,\n shadows = true,\n appearance = \"dark\",\n cardWidth = 380,\n cardRatio = 0.74,\n showNav = true,\n label = \"Social posts\",\n className = \"\",\n cardClassName = \"\",\n}: PostSwiperProps) {\n const [swiper, setSwiper] = useState(null);\n const [active, setActive] = useState(0);\n const [reduced, setReduced] = useState(false);\n\n // Reduced motion is read after mount, so the server and the first client render match\n useEffect(() => {\n const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const update = () => setReduced(query.matches);\n update();\n query.addEventListener(\"change\", update);\n return () => query.removeEventListener(\"change\", update);\n }, []);\n\n // Swiper reads the card effect options once, so after a change we hand it the new ones and redraw\n useEffect(() => {\n if (!swiper || swiper.destroyed) return;\n Object.assign(swiper.params.cardsEffect ?? {}, { perSlideRotate: tilt, perSlideOffset: spread, slideShadows: shadows });\n swiper.update();\n }, [swiper, tilt, spread, shadows]);\n\n // Autoplay starts and stops from the props (and never runs for visitors who prefer less motion)\n const autoplayOn = autoplayDelay > 0 && !reduced;\n useEffect(() => {\n if (!swiper || swiper.destroyed || !swiper.autoplay) return;\n if (autoplayOn) {\n swiper.params.autoplay = { ...(swiper.params.autoplay as object), delay: autoplayDelay * 1000, disableOnInteraction: false, pauseOnMouseEnter: true };\n swiper.autoplay.start();\n } else {\n swiper.autoplay.stop();\n }\n }, [swiper, autoplayOn, autoplayDelay]);\n\n // Only the front card can take focus. The cards behind it (and the loop's duplicates) are inert,\n // so tabbing never lands on a button you can't see.\n const markFront = (instance: SwiperInstance) => {\n instance.slides.forEach((slide) => slide.toggleAttribute(\"inert\", !slide.classList.contains(\"swiper-slide-active\")));\n };\n\n const canLoop = loop && posts.length > 2;\n const go = (direction: 1 | -1) => {\n if (!swiper || swiper.destroyed) return;\n if (direction === 1) swiper.slideNext();\n else swiper.slidePrev();\n };\n\n return (\n \n {/* Remounted when loop changes, because Swiper builds its loop copies once */}\n {\n setSwiper(instance);\n setActive(instance.realIndex);\n markFront(instance);\n // Autoplay begins on its own; the effect above turns it off when the prop says so\n if (!autoplayOn) instance.autoplay?.stop();\n }}\n onDestroy={() => setSwiper(null)}\n onRealIndexChange={(instance) => setActive(instance.realIndex)}\n onSlideChange={markFront}\n onTransitionEnd={markFront}\n onSlidesUpdated={markFront}\n className=\"!overflow-visible\"\n style={{ width: cardWidth, maxWidth: \"100%\", aspectRatio: String(cardRatio), margin: 0 }}\n >\n {posts.map((post) => (\n \n \n \n ))}\n \n\n {showNav && (\n
\n go(-1)}>\n \n \n \n {String(active + 1).padStart(2, \"0\")} / {String(posts.length).padStart(2, \"0\")}\n \n go(1)}>\n \n \n
\n )}\n \n );\n}\n\nfunction NavButton({ label, onClick, children }: { label: string; onClick: () => void; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n// ---------------------------------------------------------------------------------------------\n// The card. Everything inside is sized in em, and the card sets its own font size from its width\n// (a container query), so the same post reads well at 330px and at 420px.\n// ---------------------------------------------------------------------------------------------\n\nfunction PostCard({ post, appearance }: { post: SocialPost; appearance: NonNullable }) {\n return (\n
\n \n {post.platform === \"x\" && }\n {post.platform === \"facebook\" && }\n {post.platform === \"instagram\" && }\n \n
\n );\n}\n\nfunction Avatar({ post, className = \"\" }: { post: SocialPost; className?: string }) {\n // The name sits right beside it, so the photo is decoration\n return \"\";\n}\n\nfunction Picture({ post, className = \"\" }: { post: SocialPost; className?: string }) {\n if (!post.media && !post.image) return null;\n return (\n
\n {post.media ?? (\n {post.imageAlt\n )}\n
\n );\n}\n\nfunction Name({ post }: { post: SocialPost }) {\n return (\n \n {post.name}\n {post.verified && }\n \n );\n}\n\n// A small round or pill button. `on` tints it with `colour` and keeps it pressed.\nfunction Action({ label, text, count, on = false, colour, onPress, children, className = \"\" }: { label: string; text?: string; count?: number; on?: boolean; colour?: string; onPress?: (icon: HTMLElement | null) => void; children: ReactNode; className?: string }) {\n return (\n onPress?.(event.currentTarget.querySelector(\"[data-icon]\"))}\n style={on && colour ? { color: colour } : undefined}\n className={`group flex cursor-pointer items-center gap-[0.45em] rounded-full p-[0.5em] text-[color:var(--pc-muted)] transition-colors duration-200 hover:bg-[var(--pc-hover)] hover:text-[color:var(--pc-text)] focus-visible:outline-2 focus-visible:outline-[#1d9bf0] ${className}`}\n >\n \n {children}\n \n {text && {text}}\n {count !== undefined && {compact.format(count)}}\n \n );\n}\n\n// The short-text look: avatar beside a header, big type when there is no picture, a stats row below.\nfunction ShortPost({ post }: { post: SocialPost }) {\n const [liked, setLiked] = useState(false);\n const [reposted, setReposted] = useState(false);\n const [saved, setSaved] = useState(false);\n const hasPicture = Boolean(post.image || post.media);\n\n return (\n
\n
\n \n
\n \n \n @{post.handle ?? post.name.toLowerCase().replace(/\\s+/g, \"\")} · {post.time}\n \n
\n \n
\n\n {post.text && (\n

{post.text}

\n )}\n \n\n
\n \n \n \n { setReposted(!reposted); if (!reposted) pop(icon); }}>\n \n \n { setLiked(!liked); if (!liked) pop(icon); }}>\n \n \n \n \n \n { setSaved(!saved); if (!saved) pop(icon); }}>\n \n \n
\n
\n );\n}\n\n// The feed look: header row, text, a full-width picture, a reactions line and three wide buttons.\nfunction FeedPost({ post }: { post: SocialPost }) {\n const [liked, setLiked] = useState(false);\n const hasPicture = Boolean(post.image || post.media);\n const likes = (post.likes ?? 0) + (liked ? 1 : 0);\n\n return (\n
\n
\n \n
\n \n \n {post.time} · \n \n
\n \n
\n\n {post.text && (\n

{post.text}

\n )}\n \n\n
\n \n \n \n \n {full.format(likes)}\n \n \n {full.format(post.comments ?? 0)} comments · {full.format(post.shares ?? 0)} shares\n \n
\n\n
\n { setLiked(!liked); if (!liked) pop(icon); }} className=\"justify-center rounded-[0.6em]\">\n \n \n \n \n \n \n \n \n
\n
\n );\n}\n\n// The photo look: a ringed avatar, the picture taking most of the card, actions and a caption.\nfunction PhotoPost({ post }: { post: SocialPost }) {\n const [liked, setLiked] = useState(false);\n const [saved, setSaved] = useState(false);\n const likes = (post.likes ?? 0) + (liked ? 1 : 0);\n\n return (\n
\n
\n {/* The gradient ring is the avatar's padding showing through */}\n \n \n \n
\n \n · {post.time}\n
\n \n
\n\n \n\n
\n { setLiked(!liked); if (!liked) pop(icon); }} className=\"text-[color:var(--pc-text)]\">\n \n \n \n \n \n \n \n \n { setSaved(!saved); if (!saved) pop(icon); }} className=\"ml-auto text-[color:var(--pc-text)]\">\n \n \n
\n\n
\n

{full.format(likes)} likes

\n {post.text && (\n

\n {post.name} {post.text}\n

\n )}\n
\n
\n );\n}\n"}],"categories":["cards","swiper","social","posts","stack","drag"],"docs":"import { PostSwiper } from \"@/components/dimaac/post-swiper\". Give its parent a size: it fills it. Docs, playground and props: https://ui.dimaac.com/components/post-swiper","meta":{"tier":"free","preview":"https://ui.dimaac.com/components/post-swiper","credits":[{"by":"Benginur Hajjaj","url":"https://www.lummi.ai/photo/calm-portrait-d1zqo","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"rena","url":"https://www.lummi.ai/photo/stylish-portrait-upjeu","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Amino","url":"https://www.lummi.ai/photo/vivid-portrait-on-pink-oxbow","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Steph Meade","url":"https://www.lummi.ai/photo/expressive-minimal-portrait-jrfyc","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Lloyd Creates","url":"https://www.lummi.ai/photo/poised-portrait-ooi9b","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Amino","url":"https://www.lummi.ai/photo/stylish-portrait-8inth","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Viri Gutiérrez","url":"https://www.lummi.ai/photo/contemplative-silhouette-against-modern-minimalist-architecture-1-haa","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Beth Design Studio","url":"https://www.lummi.ai/photo/desert-wanderer-9puhu","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Dona Mara","url":"https://www.lummi.ai/photo/elegant-perfume-bottle-j5t5p","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Ricardo Matos","url":"https://www.lummi.ai/photo/surreal-3d-planet-scene-ofhhw","what":"Photo","source":"Lummi","licence":"Lummi License"},{"by":"Krystyna","url":"https://www.lummi.ai/photo/moody-solitary-figure-x1avl","what":"Photo","source":"Lummi","licence":"Lummi License"}]}}