78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import Link from 'next/link';
|
||
import { fetchPublicRepos } from '@/lib/github';
|
||
import { SidebarLayout } from '@/components/sidebar-layout';
|
||
|
||
export const revalidate = 3600;
|
||
|
||
export const metadata = {
|
||
title: 'GitHub 專案',
|
||
};
|
||
|
||
export default async function ProjectsPage() {
|
||
const repos = await fetchPublicRepos();
|
||
|
||
return (
|
||
<section className="space-y-4">
|
||
<SidebarLayout>
|
||
<header className="space-y-1">
|
||
<h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
|
||
GitHub 專案
|
||
</h1>
|
||
<p className="type-small text-slate-500 dark:text-slate-400">
|
||
從我的 GitHub 帳號自動抓取公開的程式庫與專案。
|
||
</p>
|
||
</header>
|
||
|
||
{repos.length === 0 ? (
|
||
<p className="mt-4 type-small text-slate-500 dark:text-slate-400">
|
||
目前沒有可顯示的 GitHub 專案，或暫時無法連線到 GitHub。
|
||
</p>
|
||
) : (
|
||
<ul className="mt-4 grid gap-4 sm:grid-cols-2">
|
||
{repos.map((repo) => (
|
||
<li
|
||
key={repo.id}
|
||
className="flex h-full flex-col rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
|
||
>
|
||
<div className="flex items-start justify-between gap-2">
|
||
<Link
|
||
href={repo.htmlUrl}
|
||
prefetch={false}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="type-base font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50"
|
||
>
|
||
{repo.name}
|
||
</Link>
|
||
{repo.stargazersCount > 0 && (
|
||
<span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
|
||
★ {repo.stargazersCount}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{repo.description && (
|
||
<p className="mt-2 flex-1 type-small text-slate-600 dark:text-slate-300">
|
||
{repo.description}
|
||
</p>
|
||
)}
|
||
|
||
<div className="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
|
||
<span>{repo.language ?? '其他'}</span>
|
||
<span suppressHydrationWarning>
|
||
更新於{' '}
|
||
{repo.updatedAt
|
||
? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
|
||
: '未知'}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</SidebarLayout>
|
||
</section>
|
||
);
|
||
}
|
||
|