website/components/TeamCard/TeamCard.js

import styles from './TeamCard.module.css';
import Image from 'next/image';
import Link from 'next/link';

import classNames from 'classnames';

/**
 * A reusable component to credit someone.
 *
 * @param {string} name - The name of the contributor.
 * @param {string} caption - A caption that more or less describes the user's contributions.
 * @param {string} pic - A link to the avatar image.
 * @param {string} link - A link to the user page for this user (e.g. github/gitlab/gitbucket/gitrekt profile, fedi account, personal website/blog, ...)
 * @param {boolean} compact - Whether the card should be compact (e.g. Special thanks section) or regular sized (e.g. The team section).
 *
 * @example
 * <TeamCard name="Ash (pinklimes)" caption="greatest web developer, right after Charlotte" pic="https://limes.pink/assets/images/spinmii.gif" link="https://limes.pink" />
 *
 */

export default function TeamCard(ctx) {
	const { name, caption, pic, link, compact, className } = ctx;

	return (
		<Link href={link} className={classNames(styles.card, { [styles.compact]: compact }, className)}>
			<div className={styles.imageWrapper}>
				<Image src={pic} width={110} height={110} alt="" className={styles.image} />
			</div>
			<div className={styles.text}>
				<h3>{name}</h3>
				<p>{caption}</p>
			</div>
		</Link>
	);
}