"use client"; import type { HTMLAttributes, KeyboardEvent } from "react"; import { useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; export type ProjectPhase = { id: string; label: string; detail: string; status: "complete" | "active" | "upcoming" }; type ProjectPhaseCardProps = HTMLAttributes & { title: string; phases: ProjectPhase[]; activeId?: string; defaultActiveId?: string; onActiveIdChange?: (id: string) => void; reducedMotion?: boolean; }; const statusLabel: Record = { complete: "Complete", active: "In progress", upcoming: "Upcoming" }; export function ProjectPhaseCard({ title, phases, activeId, defaultActiveId, onActiveIdChange, reducedMotion, className = "", ...props }: ProjectPhaseCardProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const uid = useId(); const tabs = useRef>([]); const [internalId, setInternalId] = useState(defaultActiveId ?? phases.find((phase) => phase.status === "active")?.id ?? phases[0]?.id ?? ""); const selectedId = activeId ?? internalId; const selected = phases.find((phase) => phase.id === selectedId) ?? phases[0]; const completed = phases.filter((phase) => phase.status === "complete").length; const select = (id: string) => { if (activeId === undefined) setInternalId(id); onActiveIdChange?.(id); }; const onTabKeyDown = (event: KeyboardEvent, index: number) => { const last = phases.length - 1; let next = -1; if (event.key === "ArrowRight") next = index >= last ? 0 : index + 1; else if (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 = phases[next]; if (!target) return; event.preventDefault(); select(target.id); tabs.current[next]?.focus(); }; if (!selected) return null; return (

{title}

{completed} of {phases.length} complete

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

{selected.detail}

); }

Billing portal redesign

Billing portal redesign