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:T4fbc,"use client"; import { useEffect, useState, type CSSProperties, type ReactNode } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import { A11y, Autoplay, EffectCards, Keyboard } from "swiper/modules"; import type { Swiper as SwiperInstance } from "swiper"; import { ArrowLeft, ArrowRight, BadgeCheck, Bookmark, ChartNoAxesColumn, Ellipsis, Globe, Heart, MessageCircle, Repeat2, Send, Share, ThumbsUp } from "lucide-react"; import "swiper/css"; import "swiper/css/effect-cards"; import "swiper/css/a11y"; // A deck of social posts you swipe through. Swiper's "cards" effect does the stacking and the // drag; the posts are three small card looks (a short-text post, a photo-first post and a // feed post with actions) so one deck can mix them. Each card has working like and save buttons. export type SocialPost = { /** A stable key for the post. */ id: string; /** Which card look to use: "x" (short text post), "facebook" (feed post) or "instagram" (photo post). */ platform: "x" | "facebook" | "instagram"; /** The author's display name. */ name: string; /** The author's handle without the @ (used by the "x" look). */ handle?: string; /** URL of the author's round profile photo. */ avatar: string; /** When it was posted, as short text: "1h", "Yesterday". */ time: string; /** Shows the verified badge next to the name. */ verified?: boolean; /** The post text. */ text?: string; /** URL of the post's photo. It fills the space the text leaves. */ image?: string; /** Describes the photo for screen readers. */ imageAlt?: string; /** Your own picture area in place of `image`: a quote card, a chart, anything. It fills the same space. */ media?: ReactNode; /** The like count. The like button adds one. */ likes?: number; /** The comment count. */ comments?: number; /** The share or repost count. */ shares?: number; }; export type PostSwiperProps = { /** The posts, front card first. Four to ten work best. */ posts: SocialPost[]; /** Wraps around: the last card is followed by the first. Needs at least three posts. */ loop?: boolean; /** Shows a grab cursor over the deck. */ grabCursor?: boolean; /** Seconds between automatic swipes. 0 turns autoplay off. It pauses while the pointer is over the deck. */ autoplayDelay?: number; /** How much each card behind the front one is turned, in degrees. */ tilt?: number; /** How far each card behind the front one sits out from it, in pixels. */ spread?: number; /** Darkens the cards behind the front one, for depth. */ shadows?: boolean; /** Card colours: "dark" or "light". */ appearance?: "dark" | "light"; /** The card width in pixels. It shrinks to fit a narrow screen. */ cardWidth?: number; /** Card width divided by card height. Lower is taller. */ cardRatio?: number; /** Shows the arrow buttons and the counter under the deck. */ showNav?: boolean; /** The name screen readers give the deck. */ label?: string; /** Extra classes for the outer box. */ className?: string; /** Extra classes for each card, e.g. a different radius. */ cardClassName?: string; }; // Colours of the two card looks. The card reads them as CSS variables, so a change here is the only edit. const palettes: Record, CSSProperties> = { 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, 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, }; const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }); const full = new Intl.NumberFormat("en"); // A quick scale pop on the icon that was pressed. The Web Animations API cleans itself up and // needs no library. Skipped when the visitor prefers reduced motion. function pop(element: Element | null) { if (!element || typeof element.animate !== "function") return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; element.animate([{ transform: "scale(1)" }, { transform: "scale(1.35)" }, { transform: "scale(1)" }], { duration: 320, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" }); } export function PostSwiper({ posts, loop = true, grabCursor = true, autoplayDelay = 0, tilt = 2, spread = 10, shadows = true, appearance = "dark", cardWidth = 380, cardRatio = 0.74, showNav = true, label = "Social posts", className = "", cardClassName = "", }: PostSwiperProps) { const [swiper, setSwiper] = useState(null); const [active, setActive] = useState(0); const [reduced, setReduced] = useState(false); // Reduced motion is read after mount, so the server and the first client render match useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(query.matches); update(); query.addEventListener("change", update); return () => query.removeEventListener("change", update); }, []); // Swiper reads the card effect options once, so after a change we hand it the new ones and redraw useEffect(() => { if (!swiper || swiper.destroyed) return; Object.assign(swiper.params.cardsEffect ?? {}, { perSlideRotate: tilt, perSlideOffset: spread, slideShadows: shadows }); swiper.update(); }, [swiper, tilt, spread, shadows]); // Autoplay starts and stops from the props (and never runs for visitors who prefer less motion) const autoplayOn = autoplayDelay > 0 && !reduced; useEffect(() => { if (!swiper || swiper.destroyed || !swiper.autoplay) return; if (autoplayOn) { swiper.params.autoplay = { ...(swiper.params.autoplay as object), delay: autoplayDelay * 1000, disableOnInteraction: false, pauseOnMouseEnter: true }; swiper.autoplay.start(); } else { swiper.autoplay.stop(); } }, [swiper, autoplayOn, autoplayDelay]); // Only the front card can take focus. The cards behind it (and the loop's duplicates) are inert, // so tabbing never lands on a button you can't see. const markFront = (instance: SwiperInstance) => { instance.slides.forEach((slide) => slide.toggleAttribute("inert", !slide.classList.contains("swiper-slide-active"))); }; const canLoop = loop && posts.length > 2; const go = (direction: 1 | -1) => { if (!swiper || swiper.destroyed) return; if (direction === 1) swiper.slideNext(); else swiper.slidePrev(); }; return (

{/* Remounted when loop changes, because Swiper builds its loop copies once */} { setSwiper(instance); setActive(instance.realIndex); markFront(instance); // Autoplay begins on its own; the effect above turns it off when the prop says so if (!autoplayOn) instance.autoplay?.stop(); }} onDestroy={() => setSwiper(null)} onRealIndexChange={(instance) => setActive(instance.realIndex)} onSlideChange={markFront} onTransitionEnd={markFront} onSlidesUpdated={markFront} className="!overflow-visible" style={{ width: cardWidth, maxWidth: "100%", aspectRatio: String(cardRatio), margin: 0 }} > {posts.map((post) => ( ))} {showNav && (

go(-1)}> go(1)}>

)}

); } function NavButton({ label, onClick, children }: { label: string; onClick: () => void; children: ReactNode }) { return ( ); } // --------------------------------------------------------------------------------------------- // The card. Everything inside is sized in em, and the card sets its own font size from its width // (a container query), so the same post reads well at 330px and at 420px. // --------------------------------------------------------------------------------------------- function PostCard({ post, appearance }: { post: SocialPost; appearance: NonNullable }) { return (

{post.platform === "x" && } {post.platform === "facebook" && } {post.platform === "instagram" && }

); } function Avatar({ post, className = "" }: { post: SocialPost; className?: string }) { // The name sits right beside it, so the photo is decoration return

; } function Picture({ post, className = "" }: { post: SocialPost; className?: string }) { if (!post.media && !post.image) return null; return (

{post.media ?? ( {post.imageAlt

)}

); } function Name({ post }: { post: SocialPost }) { return ( {post.name} {post.verified && } ); } // A small round or pill button. `on` tints it with `colour` and keeps it pressed. function 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 }) { return ( ); } // The short-text look: avatar beside a header, big type when there is no picture, a stats row below. function ShortPost({ post }: { post: SocialPost }) { const [liked, setLiked] = useState(false); const [reposted, setReposted] = useState(false); const [saved, setSaved] = useState(false); const hasPicture = Boolean(post.image || post.media); return (

@{post.handle ?? post.name.toLowerCase().replace(/\s+/g, "")} · {post.time}

{post.text && (

{post.text}

)}

); } // The feed look: header row, text, a full-width picture, a reactions line and three wide buttons. function FeedPost({ post }: { post: SocialPost }) { const [liked, setLiked] = useState(false); const hasPicture = Boolean(post.image || post.media); const likes = (post.likes ?? 0) + (liked ? 1 : 0); return (

{post.time} ·

{post.text && (

{post.text}

)}

); } // The photo look: a ringed avatar, the picture taking most of the card, actions and a caption. function PhotoPost({ post }: { post: SocialPost }) { const [liked, setLiked] = useState(false); const [saved, setSaved] = useState(false); const likes = (post.likes ?? 0) + (liked ? 1 : 0); return (

{/* The gradient ring is the avatar's padding showing through */}

· {post.time}

); } 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","swiper",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/swiper","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":"swiper"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/post-swiper/post-swiper.tsx","content":"$50","type":"registry:component","target":"components/dimaac/post-swiper.tsx"}],"className":"h-[70svh] min-h-80"}]]}]