"use client"; import { AnimatePresence, LayoutGroup, motion, MotionConfig, useReducedMotion, } from "motion/react"; import { useId, useRef, useState } from "react"; import clsx from "clsx"; type Tab = { id: string; label: string; eyebrow: string; title: string; body: string; stats: { label: string; value: string }[]; }; // Change Here const TABS: Tab[] = [ { id: "overview", label: "نمای کلی", eyebrow: "خلاصه", title: "همه‌چیز در یک نگاه", body: "وضعیت پروژه، پیشرفت هفتگی و نکات مهم را بدون جابه‌جایی بین صفحات ببینید.", stats: [ { label: "پیشرفت", value: "۷۲٪" }, { label: "وظایف", value: "۱۸" }, { label: "اعضا", value: "۶" }, ], }, { id: "activity", label: "فعالیت‌ها", eyebrow: "به‌روز", title: "آخرین تغییرات تیم", body: "نظرها، آپلودها و تأییدها با ترتیب زمانی می‌آیند تا همیشه بدانید چه کسی چه کاری کرده.", stats: [ { label: "امروز", value: "۹" }, { label: "در انتظار", value: "۳" }, { label: "انجام‌شده", value: "۱۴" }, ], }, { id: "settings", label: "تنظیمات", eyebrow: "کنترل", title: "ترجیحات فضای کار", body: "اعلان‌ها، سطح دسترسی و ظاهر رابط را از همین‌جا تنظیم کنید؛ تغییرات فوری اعمال می‌شوند.", stats: [ { label: "اعلان", value: "روشن" }, { label: "تم", value: "خودکار" }, { label: "نقش", value: "ادمین" }, ], }, ]; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; const pillSpring = { type: "spring" as const, bounce: 0.2, duration: 0.55, }; export function AnimatedTabsForm() { const reduceMotion = useReducedMotion() ?? false; const layoutGroup = useId().replace(/:/g, ""); const pillId = `${layoutGroup}-pill`; const [activeId, setActiveId] = useState(TABS[0]!.id); const prevIndexRef = useRef(0); const activeIndex = TABS.findIndex((t) => t.id === activeId); const active = TABS[activeIndex] ?? TABS[0]!; const direction = activeIndex >= prevIndexRef.current ? 1 : -1; const select = (id: string) => { const next = TABS.findIndex((t) => t.id === id); if (next < 0 || id === activeId) return; prevIndexRef.current = activeIndex; setActiveId(id); }; return (

فضای کار

تب‌های متحرک

{TABS.map((tab) => { const selected = tab.id === activeId; return ( select(tab.id)} whileTap={reduceMotion ? undefined : { scale: 0.97 }} className={clsx( "relative z-0 flex-1 cursor-pointer rounded-2xl px-3 py-2.5 text-base outline-none", "focus-visible:ring-2 focus-visible:ring-ring", )} > {selected ? ( ) : null} {tab.label} ); })}

{active.eyebrow}

{active.title}

{active.body}

{active.stats.map((stat, i) => (

{stat.label}

{stat.value}

))}

); } export default function AnimatedTabs() { return (

); }