"use client"; import type { HTMLAttributes, KeyboardEvent } from "react"; import { useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; export type EditorialArticle = { id: string; kicker: string; title: string; summary: string; date: string; href?: string }; type EditorialArticleStackProps = HTMLAttributes & { items: EditorialArticle[]; activeId?: string; defaultActiveId?: string; onActiveIdChange?: (id: string) => void; title?: string; linkLabel?: string; reducedMotion?: boolean; }; export function EditorialArticleStack({ items, activeId, defaultActiveId, onActiveIdChange, title = "Articles", linkLabel = "Read article", reducedMotion, className = "", ...props }: EditorialArticleStackProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const uid = useId(); const tabs = useRef>([]); const [internalId, setInternalId] = useState(defaultActiveId ?? items[0]?.id ?? ""); const selectedId = activeId ?? internalId; const selected = items.find((item) => item.id === selectedId) ?? items[0]; const select = (id: string) => { if (activeId === undefined) setInternalId(id); onActiveIdChange?.(id); }; const onTabKeyDown = (event: KeyboardEvent, index: number) => { const last = items.length - 1; let next = -1; if (event.key === "ArrowDown" || event.key === "ArrowRight") next = index >= last ? 0 : index + 1; else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = index <= 0 ? last : index - 1; else if (event.key === "Home") next = 0; else if (event.key === "End") next = last; const target = items[next]; if (!target) return; event.preventDefault(); select(target.id); tabs.current[next]?.focus(); }; if (!selected) return null; return (

{title}

{items.map((item, index) => { const isSelected = item.id === selected.id; return ( ); })}

{selected.date}

{selected.title}

{selected.summary}

{selected.href ? ( {linkLabel} ) : null}

); }

Product journal

What 40 support tickets taught us about empty states

Product journal

What 40 support tickets taught us about empty states