43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import type { ChangelogType } from '@/lib/docs/source';
|
|
import { formatDate } from '@/lib/formatter';
|
|
import { CalendarIcon, TagIcon } from 'lucide-react';
|
|
import { getMDXComponents } from '../custom/mdx-components';
|
|
|
|
interface ReleaseCardProps {
|
|
releaseItem: ChangelogType;
|
|
}
|
|
|
|
export function ReleaseCard({ releaseItem }: ReleaseCardProps) {
|
|
const { title, description, date, version } = releaseItem.data;
|
|
const formattedDate = formatDate(new Date(date));
|
|
const MDX = releaseItem.data.body;
|
|
|
|
return (
|
|
<Card className="mb-8">
|
|
<CardHeader className="space-y-4">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
|
|
<Badge variant="default" className="w-fit">
|
|
<TagIcon className="mr-1 size-3" />
|
|
{version}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
<div className="flex items-center gap-2">
|
|
<CalendarIcon className="size-4 text-muted-foreground" />
|
|
<p className="text-sm text-muted-foreground">{formattedDate}</p>
|
|
</div>
|
|
<Separator />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="max-w-none prose prose-neutral dark:prose-invert prose-img:rounded-lg">
|
|
<MDX components={getMDXComponents()} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|