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
103
104
105
106
107
108
109
110
111
112
|
import { baseOptions, linkItems, postsPerPage } from '@/app/layout.config';
import { InlineLink } from '@/components/inline-link';
import { getSortedByDatePosts, getTags } from '@/lib/source';
import { cn } from '@/lib/utils';
import { getLinks } from 'fumadocs-ui/layouts/shared';
import { ActiveLink } from '../active-link';
export function Footer() {
const links = getLinks(linkItems, baseOptions.githubUrl);
const navItems = links.filter((item) =>
['nav', 'all'].includes(item.on ?? 'all'),
);
const posts = getSortedByDatePosts();
const tags = getTags();
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.data.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((name, i) => (
<li key={`/tags/${name}`}>
<ActiveLink key={i.toString()} href={`/tags/${name}`}>
<span className='capitalize'>{name}</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>
{/* <Design /> */}
</footer>
);
}
function Design() {
return (
<div className='footer'>
<span className='footer-text font-mono'>john•doe</span>
<div className='footer-grid' />
<div className='footer-gradient' />
</div>
);
}
|
