Skip to content

Commit b77067f

Browse files
mk965mk965
committed
feat: redesign friends page with cleaner card style and add exchange link section
1 parent c8918cd commit b77067f

File tree

3 files changed

+66
-65
lines changed

3 files changed

+66
-65
lines changed

‎app/friends/friends-list.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ import type { ImdbFriends } from '~/types/data'
33

44
export function FriendsList({ friends }: { friends: ImdbFriends[] }) {
55
return (
6-
<div className="space-y-4 pt-2 md:space-y-6 md:pt-0">
7-
<div className="grid grid-cols-1 gap-4 gap-x-6 md:grid-cols-2">
8-
{friends.map((friend) => {
9-
return <FriendCard friend={friend} key={friend.name} />
10-
})}
11-
</div>
6+
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
7+
{friends.map((friend) => {
8+
return <FriendCard friend={friend} key={friend.name} />
9+
})}
1210
</div>
1311
)
1412
}

‎app/friends/page.tsx‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,57 @@ import { PageHeader } from '~/components/ui/page-header'
33
import { Container } from '~/components/ui/container'
44
import { FriendsList } from './friends-list'
55
import friends from '~/json/friends.json'
6+
import { SITE_METADATA } from '~/data/site-metadata'
7+
import { AUTHOR_INFO } from '~/data/author-info'
68

7-
// const MAX_POSTS_DISPLAY = 5
8-
// const MAX_SNIPPETS_DISPLAY = 6
9-
10-
export const metadata = genPageMetadata({ title: 'My friends and tech bloggers' })
9+
export const metadata = genPageMetadata({ title: 'Friends' })
1110

1211
export default async function FriendsPage() {
1312
const friendsList = friends.filter((f) => f.type === 'friend')
1413
const bloggersList = friends.filter((f) => f.type === 'techStar')
14+
1515
return (
16-
// <Home
17-
// posts={allCoreContent(sortPosts(allBlogs)).slice(0, MAX_POSTS_DISPLAY)}
18-
// snippets={allCoreContent(sortPosts(allSnippets)).slice(0, MAX_SNIPPETS_DISPLAY)}
19-
// />
2016
<Container as="div" className="pt-4 lg:pt-12">
2117
<PageHeader
2218
title="Friends"
2319
description="My friends and the tech bloggers I recommend."
2420
className="border-b border-gray-200 dark:border-gray-700"
2521
/>
26-
<div className="py-5 md:py-10">
27-
<h3 className="mb-6 text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-3xl">
22+
23+
<div className="py-10">
24+
<h3 className="mb-6 text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100">
2825
Friends
2926
</h3>
30-
<div className="space-y-16">
31-
<FriendsList friends={friendsList} />
32-
</div>
27+
<FriendsList friends={friendsList} />
3328
</div>
34-
<div className="mt-6 border-t border-gray-200 py-5 dark:border-gray-700 md:mt-10 md:py-10">
35-
<h3 className="mb-6 text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:mb-8 md:text-3xl">
36-
Technical bloggers
29+
30+
<div className="border-t border-gray-200 py-10 dark:border-gray-700">
31+
<h3 className="mb-6 text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100">
32+
Technical Bloggers
33+
</h3>
34+
<FriendsList friends={bloggersList} />
35+
</div>
36+
37+
<div className="border-t border-gray-200 py-10 dark:border-gray-700">
38+
<h3 className="mb-6 text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100">
39+
Exchange Links
3740
</h3>
38-
<div className="space-y-16">
39-
<FriendsList friends={bloggersList} />
41+
<div className="prose max-w-none dark:prose-invert">
42+
<p>
43+
If you are interested in exchanging links with me, please feel free to{' '}
44+
<a href={`mailto:${AUTHOR_INFO.email}`}>contact me</a>.
45+
</p>
46+
<p>
47+
<strong>Format:</strong>
48+
</p>
49+
<pre>
50+
<code className="language-yaml">
51+
{`Name: ${SITE_METADATA.title}
52+
Url: ${SITE_METADATA.siteUrl}
53+
Slogan: ${SITE_METADATA.description}
54+
Avatar: ${SITE_METADATA.siteUrl}${SITE_METADATA.siteLogo}`}
55+
</code>
56+
</pre>
4057
</div>
4158
</div>
4259
</Container>

‎components/cards/friend/index.tsx‎

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,42 @@
11
'use client'
22

3-
import { GradientBorder } from '~/components/effects/gradient-border'
4-
import { GrowingUnderline } from '~/components/effects/growing-underline'
5-
import { Image, Zoom } from '~/components/ui/image'
3+
import { Image } from '~/components/ui/image'
64
import { Link } from '~/components/ui/link'
7-
import { TiltedGridBackground } from '~/components/effects/tilted-grid-background'
85
import type { ImdbFriends } from '~/types/data'
6+
import { ArrowUpRight } from 'lucide-react'
97

108
export function FriendCard({ friend }: { friend: ImdbFriends }) {
119
const { name, slogan, imgSrc, url } = friend
1210

1311
return (
14-
<GradientBorder className="rounded-xl shadow-sm dark:bg-white/5">
15-
<TiltedGridBackground className="inset-0 z-[-1]" />
16-
<div className="flex gap-5 md:gap-5">
17-
<div className="m-4 flex shrink-0 items-end">
18-
<Zoom>
19-
<Image
20-
src={imgSrc}
21-
alt={name}
22-
width={300}
23-
height={450}
24-
className="h-24 w-24 rounded-lg shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] md:h-36 md:w-36"
25-
/>
26-
</Zoom>
12+
<Link
13+
href={url}
14+
className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 bg-transparent transition-all hover:border-primary-500 hover:shadow-lg dark:border-gray-800 dark:hover:border-primary-500"
15+
>
16+
<div className="flex h-full flex-row items-center gap-5 p-5">
17+
<div className="shrink-0">
18+
<Image
19+
src={imgSrc}
20+
alt={name}
21+
width={80}
22+
height={80}
23+
className="h-20 w-20 rounded-full shadow-sm ring-2 ring-gray-100 transition-all group-hover:ring-primary-500 dark:ring-gray-800"
24+
/>
2725
</div>
28-
<div className="relative flex grow flex-col gap-1 overflow-hidden pb-4 pr-2 pt-2 md:pr-4">
29-
<div className="flex items-start justify-between gap-3 text-xl font-semibold md:text-2xl">
30-
<Link href={url}>
31-
<GrowingUnderline>{name}</GrowingUnderline>
32-
</Link>
33-
</div>
34-
<div className="grow">
35-
<div className="flex flex-wrap items-center gap-1 text-gray-500 dark:text-gray-400">
36-
<span>{slogan}</span>
37-
</div>
26+
27+
<div className="flex min-w-0 flex-1 flex-col justify-center">
28+
<div className="mb-1 flex items-center justify-between">
29+
<h4 className="truncate text-lg font-bold text-gray-900 transition-colors group-hover:text-primary-500 dark:text-gray-100">
30+
{name}
31+
</h4>
32+
<ArrowUpRight className="h-5 w-5 text-gray-400 opacity-0 transition-all group-hover:text-primary-500 group-hover:opacity-100" />
3833
</div>
39-
<Link href={url} className="" aria-label="All posts">
40-
<GrowingUnderline data-umami-event="visit-friend">
41-
<span className="hidden md:inline-block">Visit</span>
42-
<span className="md:hidden">More</span> &rarr;
43-
</GrowingUnderline>
44-
</Link>
34+
35+
<p className="line-clamp-2 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
36+
{slogan}
37+
</p>
4538
</div>
4639
</div>
47-
</GradientBorder>
40+
</Link>
4841
)
4942
}
50-
51-
function formatRuntime(runtime: string) {
52-
const _mins = Number(runtime)
53-
const hours = Math.floor(_mins / 60)
54-
const mins = _mins % 60
55-
return `${hours}h ${mins < 10 ? '0' : ''}${mins}m`
56-
}

0 commit comments

Comments
 (0)
⚡