1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import { baseOptions, linkItems, postsPerPage } from '@/app/(main)/layout.config';
import { InlineLink } from '@/components/inline-link';
import { getPublishedPosts, getAllTags } from '@/lib/payload-posts';
import { cn } from '@/lib/utils';
import { getLinks } from 'fumadocs-ui/layouts/shared';
import { ActiveLink } from '../active-link';
export async function Footer() {
const links = getLinks(linkItems, baseOptions.githubUrl);
const navItems = links.filter((item) =>
['nav', 'all'].includes(item.on ?? 'all'),
);
// 从 Payload 获取文章和标签
const { posts } = await getPublishedPosts({ limit: postsPerPage });
const tags = await getAllTags();
return (
<footer className={cn('flex flex-col gap-4')}>
<div
className={cn(
'grid gap-8 text-muted-foreground text-sm sm:grid-cols-4',
'container mx-auto sm:gap-16 sm:px-8 sm:py-16',
'border-border/70 border-b border-dashed dark:border-border',
)}
>
<div className='flex flex-col gap-6'>
<p className='font-medium text-foreground'>Pages</p>
<ul className='flex flex-col gap-3'>
<li className='flex items-center gap-2'>
<ActiveLink href={'/'}>Home</ActiveLink>
</li>
{navItems
.filter(
(item) =>
item.type !== 'menu' &&
item.type !== 'custom' &&
item.type !== 'icon',
)
.map((item, i) => (
<li key={item.url}>
<ActiveLink key={i.toString()} href={item.url}>
{item.text}
</ActiveLink>
</li>
))}
</ul>
</div>
<div className='flex flex-col gap-6'>
<p className='font-medium text-foreground'>Posts</p>
<ul className='flex flex-col gap-3'>
{posts.slice(0, postsPerPage).map((post, i) => (
<li key={post.url}>
<ActiveLink key={i.toString()} href={post.url}>
{post.title}
</ActiveLink>
</li>
))}
</ul>
</div>
<div className='flex flex-col gap-6'>
<p className='font-medium text-foreground'>Tags</p>
<ul className='flex flex-col gap-3'>
{tags.slice(0, postsPerPage).map((item, i) => (
<li key={`/tags/${item.tag}`}>
<ActiveLink key={i.toString()} href={`/tags/${item.tag}`}>
<span className='capitalize'>{item.tag}</span>
</ActiveLink>
</li>
))}
</ul>
</div>
<div className='flex flex-col gap-6'>
<p className='font-medium text-foreground'>Socials</p>
<ul className='flex flex-col gap-3'>
{navItems
.filter((item) => item.type === 'icon')
.map((item, i) => (
<li key={item.url}>
<InlineLink
key={i.toString()}
href={item.url}
className='inline-flex items-center gap-1.5 text-muted-foreground no-underline [&_svg]:size-4'
>
{item.icon}
{item.text}
</InlineLink>
</li>
))}
</ul>
</div>
</div>
</footer>
);
}
|
