1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/blog/webmentions/Likes.astro b/src/components/blog/webmentions/Likes.astro
new file mode 100644
index 0000000..7862c43
--- /dev/null
+++ b/src/components/blog/webmentions/Likes.astro
@@ -0,0 +1,52 @@
+---
+import { Image } from "astro:assets";
+import type { WebmentionsChildren } from "@/types";
+
+interface Props {
+	mentions: WebmentionsChildren[];
+}
+
+const { mentions } = Astro.props;
+const MAX_LIKES = 10;
+
+const likes = mentions.filter((mention) => mention["wm-property"] === "like-of");
+const likesToShow = likes
+	.filter((like) => like.author?.photo && like.author.photo !== "")
+	.slice(0, MAX_LIKES);
+---
+
+{
+	!!likes.length && (
+		<div>
+			<p class="text-accent-2 mb-0">
+				<strong>{likes.length}</strong>
+				{likes.length > 1 ? " People" : " Person"} liked this
+			</p>
+			{!!likesToShow.length && (
+				<ul class="flex list-none flex-wrap overflow-hidden ps-2" role="list">
+					{likesToShow.map((like) => (
+						<li class="p-like h-cite -ms-2">
+							<a
+								class="u-url not-prose ring-global-text hover:ring-link focus-visible:ring-link relative inline-block overflow-hidden rounded-full ring-2 hover:z-10 hover:ring-4 focus-visible:z-10 focus-visible:ring-4"
+								href={like.author?.url}
+								rel="noreferrer"
+								target="_blank"
+								title={like.author?.name}
+							>
+								<span class="p-author h-card">
+									<Image
+										alt={like.author!.name}
+										class="u-photo my-0 inline-block h-12 w-12"
+										height={48}
+										src={like.author!.photo}
+										width={48}
+									/>
+								</span>
+							</a>
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	)
+}