65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import Link from 'next/link';
|
|
import { siteConfig } from '@/lib/config';
|
|
import { getAllPostsSorted, getAllTagsWithCount } from '@/lib/posts';
|
|
|
|
export function RightSidebar() {
|
|
const latest = getAllPostsSorted().slice(0, 5);
|
|
const tags = getAllTagsWithCount().slice(0, 30);
|
|
|
|
return (
|
|
<aside className="hidden flex-col gap-4 lg:flex">
|
|
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
|
關於本站
|
|
</h2>
|
|
<p className="mt-1 text-xs text-slate-600 dark:text-slate-200">
|
|
{siteConfig.description}
|
|
</p>
|
|
</section>
|
|
|
|
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
|
最新文章
|
|
</h2>
|
|
<ul className="mt-2 space-y-1">
|
|
{latest.map((post) => (
|
|
<li key={post._id}>
|
|
<Link
|
|
href={post.url}
|
|
className="line-clamp-2 text-xs text-slate-700 hover:text-blue-600 dark:text-slate-100 dark:hover:text-blue-400"
|
|
>
|
|
{post.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{tags.length > 0 && (
|
|
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
|
標籤雲
|
|
</h2>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
|
{tags.map(({ tag, count }) => {
|
|
let sizeClass = 'text-[11px]';
|
|
if (count >= 5) sizeClass = 'text-sm font-semibold';
|
|
else if (count >= 3) sizeClass = 'text-xs font-medium';
|
|
|
|
return (
|
|
<Link
|
|
key={tag}
|
|
href={`/tags/${encodeURIComponent(tag)}`}
|
|
className={`${sizeClass} rounded-full bg-slate-100 px-2 py-0.5 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700`}
|
|
>
|
|
{tag}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|