"use client"; import * as React from "react"; import Image from "next/image"; import Link from "next/link"; import { useMediaQuery } from "@/hooks/use-media-query"; import { cn } from "@/lib/utils"; import { Card } from "@/components/ui/card"; export interface NewsArticle { href: string; title: string; summary: string; image: string; } const OFFSET_FACTOR = 4; const SCALE_FACTOR = 0.03; const OPACITY_FACTOR = 0.1; export function News({ articles }: { articles: NewsArticle[] }) { const [dismissedNews, setDismissedNews] = React.useState([]); const cards = articles.filter(({ href }) => !dismissedNews.includes(href)); const cardCount = cards.length; const [showCompleted, setShowCompleted] = React.useState(cardCount > 0); React.useEffect(() => { let timeout: NodeJS.Timeout | undefined = undefined; if (cardCount === 0) timeout = setTimeout(() => setShowCompleted(false), 2700); return () => clearTimeout(timeout); }, [cardCount]); return cards.length || showCompleted ? (

{cards.toReversed().map(({ href, title, summary, image }, idx) => (

3 ? [ "opacity-0 sm:group-hover:translate-y-[var(--y)] sm:group-hover:opacity-[var(--opacity)]", "sm:group-has-[*[data-dragging=true]]:translate-y-[var(--y)] sm:group-has-[*[data-dragging=true]]:opacity-[var(--opacity)]", ] : "translate-y-[var(--y)] opacity-[var(--opacity)]" )} style={ { "--y": `-${(cardCount - (idx + 1)) * OFFSET_FACTOR}%`, "--scale": 1 - (cardCount - (idx + 1)) * SCALE_FACTOR, "--opacity": cardCount - (idx + 1) >= 6 ? 0 : 1 - (cardCount - (idx + 1)) * OPACITY_FACTOR, } as React.CSSProperties } aria-hidden={idx !== cardCount - 1} > 2} active={idx === cardCount - 1} onDismiss={() => setDismissedNews([href, ...dismissedNews.slice(0, 50)]) } />

))}

{showCompleted && !cardCount && (

You're all caught up!

)}

) : null; } function NewsCard({ title, description, image, onDismiss, hideContent, href, active, }: { title: string; description: string; image?: string; onDismiss?: () => void; hideContent?: boolean; href?: string; active?: boolean; }) { const { isMobile } = useMediaQuery(); const ref = React.useRef(null); const drag = React.useRef<{ start: number; delta: number; startTime: number; maxDelta: number; }>({ start: 0, delta: 0, startTime: 0, maxDelta: 0, }); const animation = React.useRef(); const [dragging, setDragging] = React.useState(false); const onDragMove = (e: PointerEvent) => { if (!ref.current) return; const { clientX } = e; const dx = clientX - drag.current.start; drag.current.delta = dx; drag.current.maxDelta = Math.max(drag.current.maxDelta, Math.abs(dx)); ref.current.style.setProperty("--dx", dx.toString()); }; const dismiss = () => { if (!ref.current) return; const cardWidth = ref.current.getBoundingClientRect().width; const translateX = Math.sign(drag.current.delta) * cardWidth; // Dismiss card animation.current = ref.current.animate( { opacity: 0, transform: `translateX(${translateX}px)` }, { duration: 150, easing: "ease-in-out", fill: "forwards" } ); animation.current.onfinish = () => onDismiss?.(); }; const stopDragging = (cancelled: boolean) => { if (!ref.current) return; unbindListeners(); setDragging(false); const dx = drag.current.delta; if (Math.abs(dx) > ref.current.clientWidth / (cancelled ? 2 : 3)) { dismiss(); return; } // Animate back to original position animation.current = ref.current.animate( { transform: "translateX(0)" }, { duration: 150, easing: "ease-in-out" } ); animation.current.onfinish = () => ref.current?.style.setProperty("--dx", "0"); drag.current = { start: 0, delta: 0, startTime: 0, maxDelta: 0 }; }; const onDragEnd = () => stopDragging(false); const onDragCancel = () => stopDragging(true); const onPointerDown = (e: React.PointerEvent) => { if (!active || !ref.current || animation.current?.playState === "running") return; bindListeners(); setDragging(true); drag.current.start = e.clientX; drag.current.startTime = Date.now(); drag.current.delta = 0; ref.current.style.setProperty("--w", ref.current.clientWidth.toString()); }; const onClick = () => { if (!ref.current) return; if ( isMobile && drag.current.maxDelta < ref.current.clientWidth / 10 && (!drag.current.startTime || Date.now() - drag.current.startTime < 250) ) { // Touch user didn't drag far or for long, open the link window.open(href, "_blank"); } }; const bindListeners = () => { document.addEventListener("pointermove", onDragMove); document.addEventListener("pointerup", onDragEnd); document.addEventListener("pointercancel", onDragCancel); }; const unbindListeners = () => { document.removeEventListener("pointermove", onDragMove); document.removeEventListener("pointerup", onDragEnd); document.removeEventListener("pointercancel", onDragCancel); }; return (

{title}

{description}

{image && (

)}

); } function AnimatedLogo(props: React.SVGProps) { return ( ); }