103 lines
4.4 KiB
TypeScript
103 lines
4.4 KiB
TypeScript
import React, { useRef } from 'react'
|
|
import { motion, useScroll, useTransform, useInView } from 'framer-motion'
|
|
import { useSite, type TimelineItem } from '../../api'
|
|
import { useLang } from '../../i18n/lang'
|
|
import { SectionHeading } from '../SectionHeading'
|
|
import { AddItemButton, EditableItem } from '../../admin/Editable'
|
|
|
|
const ease = [0.23, 1, 0.32, 1] as const
|
|
|
|
type Milestone = TimelineItem
|
|
|
|
function Item({ item, index, featured = false }: { item: Milestone; index: number; featured?: boolean }) {
|
|
const ref = useRef<HTMLLIElement>(null)
|
|
const active = useInView(ref, { once: true, amount: 0.6 })
|
|
const onRight = index % 2 === 0
|
|
|
|
return (
|
|
<li ref={ref} className="relative md:grid md:grid-cols-2 md:gap-16">
|
|
{/* دایرهها: مرکز دایره در موبایل و دسکتاپ دقیقاً روی مرکز خط 2px است */}
|
|
<span
|
|
aria-hidden="true"
|
|
className={`absolute right-[-5px] top-1/2 z-10 -translate-y-1/2 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
|
|
active
|
|
? 'bg-copper shadow-[0_0_15px_rgba(197,143,92,0.6),0_0_0_6px_rgba(213,135,76,0.15)]'
|
|
: 'bg-ivory/20'
|
|
}`}
|
|
/>
|
|
|
|
<motion.div
|
|
className={`pr-8 md:pr-0 ${
|
|
featured
|
|
? 'md:col-span-2 md:col-start-1 md:max-w-xl md:mx-auto'
|
|
: onRight
|
|
? 'md:col-start-1 md:pl-16 md:text-left'
|
|
: 'md:col-start-2 md:pr-16'
|
|
}`}
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={active ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
|
|
transition={{ duration: 0.55, ease }}
|
|
>
|
|
<EditableItem resource="timeline" item={item}>
|
|
<div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-6 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] md:p-8">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
|
|
<span className="relative z-10 text-sm font-medium tracking-widest text-copper">{item.year}</span>
|
|
<h3 className="relative z-10 mt-3 text-xl font-bold text-ivory transition-colors duration-300 group-hover:text-white">{item.title}</h3>
|
|
<p className="relative z-10 mt-3 text-sm font-light leading-relaxed text-ivory/60 transition-colors duration-300 group-hover:text-ivory/80">{item.desc}</p>
|
|
</div>
|
|
</EditableItem>
|
|
</motion.div>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
export function Timeline() {
|
|
const { timeline } = useSite()
|
|
const { t } = useLang()
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ['start 70%', 'end 60%'],
|
|
})
|
|
const scaleY = useTransform(scrollYProgress, [0, 1], [0, 1])
|
|
|
|
return (
|
|
<section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
|
|
<div className="mx-auto w-full max-w-site px-6 lg:px-10">
|
|
|
|
<div className="mb-16">
|
|
<SectionHeading
|
|
title={t('fallbackTimelineTitle')}
|
|
lead={t('fallbackTimelineLead')}
|
|
headingKey="timeline"
|
|
align="center"
|
|
/>
|
|
</div>
|
|
|
|
<div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
|
|
{/* خط پسزمینه ثابت - عرض 2px و همراستایی دقیق با مرکز */}
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
|
|
/>
|
|
{/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
|
|
<motion.span
|
|
aria-hidden="true"
|
|
className="absolute inset-y-0 right-0 w-[2px] origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2 md:translate-x-1/2"
|
|
style={{ scaleY }}
|
|
/>
|
|
|
|
<ol className="flex flex-col gap-12 md:gap-16">
|
|
{timeline.map((item, i) => (
|
|
<Item key={item.id} item={item} index={i} featured={i === timeline.length - 1} />
|
|
))}
|
|
</ol>
|
|
<div className="mt-12">
|
|
<AddItemButton resource="timeline" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |