blog.z0x.ca/src/components/MemberCard.astro
2024-09-10 11:56:46 -07:00

29 lines
796 B
Text

---
import type { CollectionEntry } from "astro:content";
import { Image } from "astro:assets";
type Props = {
member: CollectionEntry<"authors">;
};
const { member } = Astro.props;
const { name, avatar, bio } = member.data;
---
<div
class="animate not-prose flex flex-col sm:flex-row size-full sm:items-center gap-4 overflow-hidden rounded-xl border border-foreground bg-background p-6 hover:bg-secondary"
>
<Image
src={avatar}
alt={`Avatar of ${name}`}
width={256}
height={256}
class="aspect-square size-32 rounded-md object-cover"
/>
<div class="flex flex-col justify-between">
<a href={`/authors/${member.slug}`}>
<h3 class="mb-2 text-3xl text-foreground">{name}</h3>
<p class="mb-4 text-sm text-foreground">{bio}</p>
</a>
</div>
</div>