74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { BasePage } from "@/app/base-page";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { getPosts } from "@/lib/blog/query";
|
|
import type { Author, Post } from "@/types/blog";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Blog - OpenCut",
|
|
description:
|
|
"Read the latest news and updates about OpenCut, the free and open-source video editor.",
|
|
openGraph: {
|
|
title: "Blog - OpenCut",
|
|
description:
|
|
"Read the latest news and updates about OpenCut, the free and open-source video editor.",
|
|
type: "website",
|
|
},
|
|
};
|
|
|
|
export default async function BlogPage() {
|
|
const data = await getPosts();
|
|
if (!data || !data.posts) return <div>No posts yet</div>;
|
|
|
|
return (
|
|
<BasePage
|
|
title="Blog"
|
|
description="Read the latest news and updates about OpenCut, the free and open-source video editor."
|
|
>
|
|
<div className="flex flex-col">
|
|
{data.posts.map((post) => (
|
|
<div key={post.id} className="flex flex-col">
|
|
<BlogPostItem post={post} />
|
|
<Separator />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</BasePage>
|
|
);
|
|
}
|
|
|
|
function BlogPostItem({ post }: { post: Post }) {
|
|
return (
|
|
<Link href={`/blog/${post.slug}`}>
|
|
<div className="flex h-auto w-full items-center justify-between py-6 opacity-100 hover:opacity-75">
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="text-xl font-semibold">{post.title}</h2>
|
|
<p className="text-muted-foreground">{post.description}</p>
|
|
</div>
|
|
{post.authors && post.authors.length > 0 && (
|
|
<AuthorList authors={post.authors} />
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function AuthorList({ authors }: { authors: Author[] }) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{authors.map((author) => (
|
|
<div key={author.id} className="flex items-center gap-2">
|
|
<Avatar className="size-6 shadow-sm">
|
|
<AvatarImage src={author.image} alt={author.name} />
|
|
<AvatarFallback className="text-xs">
|
|
{author.name.charAt(0).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|