-
Notifications
You must be signed in to change notification settings - Fork 0
/
friends.tsx
102 lines (95 loc) · 2.85 KB
/
friends.tsx
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 React from 'react'
import { GetStaticProps } from 'next'
import Image from 'next/image'
import Layout from '../components/Layout'
import useTranslation from '../hooks/useTranslation'
interface Friend {
name: string
avatar: string
description: {
zh: string
en: string
}
link: string
}
interface FriendsProps {
friends: Friend[]
}
const Friends: React.FC<FriendsProps> = ({ friends }) => {
const { t, locale } = useTranslation()
return (
<Layout>
<h1 className="text-3xl font-bold mb-6">{t.friendsTitle}</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{friends.map((friend) => (
<a href={friend.link} key={friend.name} target="_blank" rel="noopener noreferrer" className="block">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center h-32">
<div className="w-20 h-20 relative flex-shrink-0 mr-4">
<Image
src={friend.avatar}
alt={friend.name}
layout="fill"
className="rounded-full"
objectFit="cover"
/>
</div>
<div className="overflow-hidden">
<h2 className="text-xl font-semibold mb-1 truncate">{friend.name}</h2>
<p className="text-gray-600 dark:text-gray-300 text-sm line-clamp-2">
{friend.description[locale as 'zh' | 'en']}
</p>
</div>
</div>
</a>
))}
</div>
</Layout>
)
}
export const getStaticProps: GetStaticProps = async () => {
const friends =
[
{
"name": "Rene Wang",
"avatar": "/images/friends/ReneWang.png",
"description": {
"zh": "全栈开发大佬,天才少年,...",
"en": "Full-stack developer, genius, ..."
},
"link": "https://rene.wang"
},
{
"name": "Charles Su",
"avatar": "/images/friends/CharlesSu.jpg",
"description": {
"zh": "乐于折腾,擅长刷机、黑苹果...",
"en": "Tech enthusiast, expert in custom ROMs, Hackintosh..."
},
"link": "https://charles.su"
},
{
"name": "YGeeker",
"avatar": "/images/friends/YGeeker.png",
"description": {
"zh": "创业公司,我在此担任联合创始人",
"en": "Start-up company. I serve as a co-founder here."
},
"link": "https://ygeeker.com"
},
{
"name": "Apply links",
"avatar": "/images/friends/github.ico",
"description": {
"zh": "点击此处申请友链",
"en": "Click here to apply friend-links"
},
"link": "https://github.com/Gloridust/ethanblog/issues/1"
}
]
return {
props: {
friends,
},
}
}
export default Friends