35 lines
1.8 KiB
TypeScript
35 lines
1.8 KiB
TypeScript
import { getArticle } from "@/app/_lib/data/article"
|
|
import MarkdownView from "@/app/_ui/MarkdownView"
|
|
import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { MdEditor } from "md-editor-rt"
|
|
import Link from "next/link"
|
|
|
|
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
|
|
const id = (await params).id
|
|
const article = await getArticle(id)
|
|
if (!article) return <></>
|
|
return <div className="w-full h-full min-h-[100vh] flex justify-center">
|
|
<div className="w-full max-w-[800px] px-4 h-full pb-[50px] pt-[100px] ">
|
|
<div className="w-full h-full ">
|
|
<div className="flex gap-x-5">
|
|
<div className="p-4 rounded-lg">
|
|
<img src={article?.cover} className=" rounded-lg shadow object-cover w-[200px] h-[200px]">
|
|
</img>
|
|
</div>
|
|
<div className="flex flex-col gap-y-3 py-5">
|
|
<h1 className="text-2xl">{article.title}</h1>
|
|
<article className=" line-clamp-3 overflow-hidden text-ellipsis">{article.description}</article>
|
|
<Link href={article.link} className="px-3 py-2 duration-150 bg-red-500 hover:bg-red-500/80 flex items-center justify-center rounded-lg text-white">
|
|
访问官网
|
|
<FontAwesomeIcon icon={faArrowRight} className="ml-2" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<MarkdownView value={article.content}></MarkdownView>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} |