52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Activity } from 'lucide-react';
|
|
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { pickAppText } from '@/lib/i18n/core';
|
|
import { useAppI18n } from '@/lib/i18n/provider';
|
|
import type { TaskTimelineCard as TaskTimelineCardView } from '@/types';
|
|
|
|
import { TaskTimelineCard } from './TaskTimelineCard';
|
|
|
|
type Props = {
|
|
cards: TaskTimelineCardView[];
|
|
isLive: boolean;
|
|
};
|
|
|
|
export function TaskTimeline({ cards, isLive }: Props) {
|
|
const { locale } = useAppI18n();
|
|
|
|
return (
|
|
<section className="space-y-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-base font-semibold">{pickAppText(locale, '时间线', 'Timeline')}</h2>
|
|
{isLive ? (
|
|
<div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
|
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
|
|
</span>
|
|
<Activity className="h-3.5 w-3.5" />
|
|
{pickAppText(locale, '实时更新', 'Live')}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{cards.length === 0 ? (
|
|
<Card className="rounded-md border-dashed">
|
|
<CardContent className="p-6 text-sm text-muted-foreground">
|
|
{pickAppText(locale, 'Beaver 正在准备第一步。', 'Beaver is preparing the first step.')}
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{cards.map((card) => (
|
|
<TaskTimelineCard key={card.id} card={card} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|