AnimatedDate.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/animated-date.tsx

功能描述

带动画的日期显示组件，悬停时显示精确日期，平时显示相对时间。带有平滑的上下滑动切换动画。

导出内容

• AnimatedDate - 带动画的日期组件

Props 接口

AnimatedDate

属性	类型	必填	默认值	说明
date	Date	是	-	日期对象
relativeText	string	是	-	相对时间文本（如 "2小时前"）
locale	string	否	'en'	日期格式化语言

日期格式

精确日期格式：yyyy年M月d日 HH:mm（中文环境下）

依赖

• lucide-react - 图标库 (Calendar)

使用示例

import { AnimatedDate } from "@/components/ui/animated-date";
import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";

// 基础用法
<AnimatedDate
  date={new Date("2024-01-15T10:30:00")}
  relativeText="2小时前"
  locale="zh-CN"
/>

// 与 date-fns 配合使用
const date = new Date("2024-01-15T10:30:00");
const relativeText = formatDistanceToNow(date, { 
  addSuffix: true,
  locale: zhCN 
});

<AnimatedDate
  date={date}
  relativeText={relativeText}
  locale="zh-CN"
/>

// 在列表中使用
{posts.map((post) => (
  <div key={post.id} className="flex items-center gap-2">
    <h3>{post.title}</h3>
    <AnimatedDate
      date={new Date(post.createdAt)}
      relativeText={post.relativeTime}
      locale="zh-CN"
    />
  </div>
))}