Rename Author to Member, add Codeberg icons

1 files changed, 63 insertions, 0 deletions

diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro
new file mode 100644
index 0000000..b98e3ee
--- /dev/null
+++ b/src/components/MemberCard.astro
@@ -0,0 +1,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>