52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { Plus } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { AppShell } from '@/components/app-shell'
|
|
import { MeetingCard } from '@/components/meeting-card'
|
|
import { mockMeetings, groupByDate, dateLabel } from '@/lib/mock-data'
|
|
|
|
export default function HomePage() {
|
|
const groups = groupByDate(mockMeetings)
|
|
const days = Object.keys(groups).sort().reverse()
|
|
|
|
return (
|
|
<AppShell>
|
|
<div className="mx-auto max-w-4xl px-5 py-8 md:px-10 md:py-10">
|
|
<header className="mb-8 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-[26px] font-semibold tracking-tight">会议记录</h1>
|
|
<p className="mt-1 text-[14px] text-muted-foreground">
|
|
共 {mockMeetings.length} 次会议 · 总时长{' '}
|
|
{Math.round(mockMeetings.reduce((s, m) => s + m.duration, 0) / 60)} 分钟
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/upload"
|
|
className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-[14px] font-medium text-primary-foreground transition-colors hover:bg-primary-light"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
新建会议
|
|
</Link>
|
|
</header>
|
|
|
|
<div className="space-y-8">
|
|
{days.map((day) => (
|
|
<section key={day}>
|
|
<div className="mb-3 flex items-center gap-3">
|
|
<h2 className="text-[13px] font-medium text-muted-foreground">
|
|
{dateLabel(day)}
|
|
</h2>
|
|
<div className="h-px flex-1 bg-border" />
|
|
</div>
|
|
<div className="space-y-3">
|
|
{groups[day].map((m) => (
|
|
<MeetingCard key={m.id} meeting={m} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</AppShell>
|
|
)
|
|
}
|