Title (标题Headline)

import { Title } from '@anker-in/headless-ui/biz'
import scenarios from './scenarios.json'
 
<Title data={{ title: 'Featured Products' }} />

<Title
  data={{
    title: 'New Arrivals',
    subtitle: 'Check out our latest products'
  }}
/>

<Title
  data={{
    title: 'Why Choose Us',
    align: 'center'
  }}
/>

<Title
  data={{
    title: 'Premium Quality',
    theme: 'dark',
    subtitle: 'Excellence in every detail'
  }}
/>

<Title
  data={{
    title: 'Limited Time Offer',
    showCountdown: true,
    countdown: {
      targetDate: '2026-12-31T23:59:59',
      showDays: true,
      showHours: true,
      showMinutes: true,
      showSeconds: false,
    }
  }}
/>

<Title
  data={{
    title: 'Flash Sale Ends In',
    showCountdown: true,
    countdown: {
      targetDate: '2026-12-25T00:00:00',
      showDays: true,
      showHours: true,
      showMinutes: true,
      showSeconds: false,
      labels: {
        days: 'Days',
        hours: 'Hours',
        minutes: 'Min'
      }
    }
  }}
/>

<Title
  data={{
    title: 'Best Sellers',
    extensions: {
      textLink: 'View All',
      link: '/products'
    }
  }}
/>

// 页面主标题
<Title
  data={{ title: 'Welcome to Our Store' }}
  as="h1"
/>
 
// 区块标题
<Title
  data={{ title: 'Featured Categories' }}
  as="h2"
/>
 
// 小节标题
<Title
  data={{ title: 'Customer Reviews' }}
  as="h3"
  weight="medium"
/>

<Title
  data={{
    title: `The World's <span className="text-primary">No.1</span> Charging Brand`,
    subtitle: 'Trusted by millions worldwide'
  }}
/>

<Title
  data={{
    title: `Best Charging<br />Technology`
  }}
/>

countdown: {
  targetDate: '2026-12-31T23:59:59',
  labels: {
    days: '天',
    hours: '时',
    minutes: '分',
    seconds: '秒'
  }
}

useEffect(() => {
  const interval = setInterval(() => {
    const now = dayjs()
    const diff = targetDate.diff(now)
 
    if (diff <= 0) {
      setIsCountdownEnded(true)
      clearInterval(interval)
      return
    }
 
    updateCountdown(diff)
  }, 1000)
 
  return () => clearInterval(interval)
}, [targetDate])

useEffect(() => {
  gsap.registerPlugin(ScrollTrigger, SplitText)
 
  if (inView) {
    // 拆分标题文本为单词
    splitTextInstance.current = new SplitText(titleRef.current, {
      type: 'words',
      wordsClass: 'word',
    })
 
    const words = splitTextInstance.current.words
    gsap.set(words, { opacity: 0 })
 
    // 创建滚动触发器
    scrollTriggerRef.current = ScrollTrigger.create({
      trigger: titleRef.current,
      start: 'bottom bottom-=4%',
      end: `bottom+=${height * 1.5}px bottom-=4%`,
      scrub: true,
      onUpdate: (self: any) => {
        const progress = self.progress
        words.forEach((word: any, i: number) => {
          const start = (i / total) * (1 - overlap)
          const width = interval * (1 + overlap)
          let opacity = (progress - start) / width
          opacity = Math.max(0, Math.min(opacity, 1))
          gsap.set(word, { opacity })
        })
      },
    })
  }
 
  // 组件卸载时清理
  return () => {
    splitTextInstance.current && splitTextInstance.current.revert()
    scrollTriggerRef.current && scrollTriggerRef.current.kill()
  }
}, [inView])