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
|
---
import Link from '@/components/Link.astro'
import AvatarComponent from '@/components/ui/avatar'
import { cn } from '@/lib/utils'
import type { SocialLink } from '@/types'
import type { CollectionEntry } from 'astro:content'
import SocialIcons from './SocialIcons.astro'
interface Props {
member: CollectionEntry<'members'>
}
const { member } = Astro.props
const { name, avatar, bio, pronouns } = member.data
const currentPath = Astro.url.pathname
const isAuthorPage = currentPath === `/members/${member.id}`
const socialLinks: SocialLink[] = [
member.data.website && { href: member.data.website, label: 'Website' },
member.data.github && { href: member.data.github, label: 'GitHub' },
member.data.codeberg && { href: member.data.codeberg, label: 'Codeberg' },
member.data.twitter && { href: member.data.twitter, label: 'Twitter' },
member.data.linkedin && { href: member.data.linkedin, label: 'LinkedIn' },
member.data.mail && { href: `mailto:${member.data.mail}`, label: 'Email' },
].filter(Boolean) as SocialLink[]
---
<div
class="has-[a:hover]:bg-muted/50 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
<div class="flex flex-wrap gap-4">
<Link
href={`/members/${member.id}`}
class={cn('block', isAuthorPage && 'pointer-events-none')}
>
<AvatarComponent
client:load
src={avatar}
alt={`Avatar of ${name}`}
fallback={name[0]}
className={cn(
'.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-md',
!isAuthorPage &&
'hover:ring-primary transition-shadow duration-300 hover:cursor-pointer hover:ring-2',
)}
/>
</Link>
<div class="flex grow flex-col justify-between gap-y-4">
<div>
<div class="flex flex-wrap items-center gap-x-2">
<h3 class="text-lg font-medium">{name}</h3>
{
pronouns && (
<span class="text-muted-foreground text-sm">({pronouns})</span>
)
}
</div>
<p class="text-muted-foreground text-sm">{bio}</p>
</div>
<SocialIcons links={socialLinks} />
</div>
</div>
</div>
|
