copperhead

---
/**
 * A compact link card: bold title, short description, optional leading icon.
 * External links open in a new tab and get a small external-link marker.
 */
import { Icon } from '@astrojs/starlight/components';
import type { StarlightIcon } from '@astrojs/starlight/types';

interface Props {
	href: string;
	title: string;
	description?: string;
	icon?: StarlightIcon;
}

const { href, title, description, icon } = Astro.props;
const external = /^https?:\/\//.test(href);
---

<a
	class="doc-card"
	{href}
	target={external ? '_blank' : undefined}
	rel={external ? 'noopener' : undefined}
>
	{icon && <Icon name={icon} class="card-icon" size="1.125rem" />}
	<span class="title">
		{title}
		{external && <Icon name="external" class="external" size="0.8em" />}
	</span>
	{description && <span class="description">{description}</span>}
</a>

<style>
	.doc-card {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		padding: 1rem 1.125rem;
		border: 1px solid var(--sl-color-gray-5);
		border-radius: 0.75rem;
		background-color: var(--sl-color-black);
		color: var(--sl-color-white);
		text-decoration: none;
		transition:
			border-color 0.15s,
			transform 0.15s;
	}
	.doc-card:hover {
		border-color: var(--sl-color-accent);
		transform: translateY(-1px);
	}
	.card-icon {
		color: var(--sl-color-text-accent);
		margin-bottom: 0.25rem;
	}
	.title {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-size: var(--sl-text-sm);
		font-weight: 600;
		line-height: 1.3;
	}
	.doc-card:hover .title {
		color: var(--sl-color-text-accent);
	}
	.external {
		color: var(--sl-color-gray-3);
	}
	.description {
		font-size: var(--sl-text-sm);
		line-height: 1.5;
		color: var(--sl-color-gray-3);
	}
</style>