"use client"; import * as Tooltip from "@radix-ui/react-tooltip"; import { useEffect, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; type TypewriterTooltipCardProps = { eyebrow?: string; text?: string; tooltip?: string; /** Forces reduced motion in addition to the OS preference. */ reducedMotion?: boolean; className?: string; }; function TypewriterCopy({ text }: { text: string }) { const [count, setCount] = useState(0); useEffect(() => { let index = 0; const timer = window.setInterval(() => { index += 1; setCount(index); if (index >= text.length) window.clearInterval(timer); }, 40); return () => window.clearInterval(timer); }, [text]); return <>{text.slice(0, count)}; } export function TypewriterTooltipCard({ eyebrow = "Release note", text = "Version 2.4 reaches 10% of workspaces at 14:00 UTC.", tooltip = "The rollout pauses automatically if the error rate passes 0.5%.", reducedMotion = false, className = "", }: TypewriterTooltipCardProps) { const reduceMotion = Boolean(useReducedMotion()) || reducedMotion; const [open, setOpen] = useState(false); const typing = open && !reduceMotion; return ( {tooltip} ); }