70 lines
1.9 KiB
Text
70 lines
1.9 KiB
Text
---
|
|
import AvatarComponent from '@/components/ui/avatar'
|
|
import { cn } from '@/lib/utils'
|
|
import Link from '@components/Link.astro'
|
|
import type { Link as SocialLink } from '@consts'
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import SocialIcons from './SocialIcons.astro'
|
|
|
|
type Props = {
|
|
author: CollectionEntry<'authors'>
|
|
linkDisabled?: boolean
|
|
}
|
|
const { author, linkDisabled = false } = Astro.props
|
|
const {
|
|
name,
|
|
avatar,
|
|
bio,
|
|
pronouns,
|
|
github,
|
|
twitter,
|
|
linkedin,
|
|
website,
|
|
mail,
|
|
} = author.data
|
|
|
|
const socialLinks: SocialLink[] = [
|
|
website && { href: website, label: 'Website' },
|
|
github && { href: github, label: 'GitHub' },
|
|
twitter && { href: twitter, label: 'Twitter' },
|
|
linkedin && { href: linkedin, label: 'LinkedIn' },
|
|
mail && { href: mail, label: 'Email' },
|
|
].filter(Boolean) as SocialLink[]
|
|
---
|
|
|
|
<div
|
|
class="overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out has-[a:hover]:bg-secondary/50"
|
|
>
|
|
<div class="flex flex-wrap gap-4">
|
|
<Link
|
|
href={`/authors/${author.slug}`}
|
|
class={cn('block', linkDisabled && 'pointer-events-none')}
|
|
>
|
|
<AvatarComponent
|
|
client:load
|
|
src={avatar}
|
|
alt={`Avatar of ${name}`}
|
|
fallback={name[0]}
|
|
className={cn(
|
|
'size-32 rounded-md',
|
|
!linkDisabled &&
|
|
'transition-shadow duration-300 hover:cursor-pointer hover:ring-2 hover:ring-primary',
|
|
)}
|
|
/>
|
|
</Link>
|
|
<div class="flex 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-semibold">{name}</h3>
|
|
{
|
|
pronouns && (
|
|
<span class="text-sm text-muted-foreground">({pronouns})</span>
|
|
)
|
|
}
|
|
</div>
|
|
<p class="text-sm text-muted-foreground">{bio}</p>
|
|
</div>
|
|
<SocialIcons links={socialLinks} />
|
|
</div>
|
|
</div>
|
|
</div>
|