苹果级产品页 React 组件

你被给定了一个任务：将现有的 React 组件集成到代码库中 代码库应支持： - shadcn 项目结构 - Tailwind CSS - Typescript 如果不支持，请提供如何通过 shadcn CLI 设置项目、安装 Tailwind 或 Typescript 的说明。 确定组件和样式的默认路径。 如果组件的默认路径不是 /components/ui，请提供说明，解释为什么创建这个文件夹很重要 将此组件复制粘贴到 /components/ui 文件夹： ```tsx mac-book-neo-hero.tsx "use client"; import * as React from "react"; import { useEffect, useRef, useState } from "react"; export type FrameSequenceStep = { from: number; to: number; color: string; num: string; total: string; icon?: React.ReactNode; title: string; description: string; label: string; }; export type FrameSequenceHeroProps = { frameCount: number; framePath: (i: number) => string; eagerCount?: number; scrollHeight?: string; brand?: React.ReactNode; navLinks?: { label: string; href: string }[]; ctaLabel?: string; ctaHref?: string; title: React.ReactNode; subtitle?: string; steps: FrameSequenceStep[]; className?: string; }; const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(" "); export function FrameSequenceHero({ frameCount, framePath, eagerCount = 140, scrollHeight = "600vh", brand, navLinks = [], ctaLabel, ctaHref = "#", title, subtitle, steps, className, }: FrameSequenceHeroProps) { const spacerRef = useRef(null); const cacheRef = useRef(new Array(frameCount)); const loadedRef = useRef(0); const targetFrameRef = useRef(0); const displayFrameRef = useRef(0); const lastShownRef = useRef(-1); const rafActiveRef = useRef(false); const [loadPct, setLoadPct] = useState(0); const [loaderDone, setLoaderDone] = useState(false); const [navScrolled, setNavScrolled] = useState(false); const [subHidden, setSubHidden] = useState(false); const [activeIdx, setActiveIdx] = useState(-1); const [progress, setProgress] = useState(0); const [stepLocal, setStepLocal] = useState(0); const [currentSrc, setCurrentSrc] = useState(() => framePath(1)); const showFrame = (i: number) => { if (i === lastShownRef.current) return; setCurrentSrc(framePath(i + 1)); lastShownRef.current = i; }; const loop = () => { if (rafActiveRef.current) return; rafActiveRef.current = true; const tick = () => { const diff = targetFrameRef.current - displayFrameRef.current; if (Math.abs(diff) { const eager = Math.min(eagerCount, frameCount); const loadOne = (i: number) => { const img = new Image(); img.decoding = "async"; img.src = framePath(i + 1); const onSettle = () => { loadedRef.current += 1; const pct = Math.round((loadedRef.current / frameCount) * 100); setLoadPct(pct); if (loadedRef.current === eager) { setLoaderDone(true); for (let j = eager; j { const spacer = spacerRef.current; if (!spacer) return; const total = spacer.offsetHeight - window.innerHeight; const p = Math.max(0, Math.min(1, window.scrollY / Math.max(1, total))); targetFrameRef.current = p * (frameCount - 1); loop(); setProgress(p); setNavScrolled(window.scrollY > 4); setSubHidden(window.scrollY > 8); let idx = -1; let local = 0; for (let i = 0; i = s.from && p { window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); onScroll(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [steps, frameCount]); return ( {loadPct {brand} {navLinks.length > 0 && ( {https://t.co/tSkQpsSthN((l) => ( {l.label} ))} )}