From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/layouts/EmojiGrid.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/ui/layouts/EmojiGrid.tsx

(limited to 'src/ui/layouts/EmojiGrid.tsx')

diff --git a/src/ui/layouts/EmojiGrid.tsx b/src/ui/layouts/EmojiGrid.tsx
new file mode 100644
index 0000000..5dc9266
--- /dev/null
+++ b/src/ui/layouts/EmojiGrid.tsx
@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+	id: string;
+	sprite: {
+		variants: { size: number; space: number }[];
+		wrap: number;
+	};
+	count: number;
+};
+
+export const EmojiGrid = ({ id, sprite, count, class: cls, ...props }: Props) => {
+	const size = sprite.variants[0]?.size ?? 48;
+	const space = sprite.variants[0]?.space ?? 2;
+	const { wrap } = sprite;
+
+	const src = `/emojis/${id}/sprite48.avif`;
+	const srcset = `/emojis/${id}/sprite48.avif 1x, /emojis/${id}/sprite96.avif 2x`;
+
+	const offsetX = (i: number) => -1 * (size + space) * (i % wrap);
+	const offsetY = (i: number) => -1 * (size + space) * Math.floor(i / wrap);
+
+	return (
+		<ul class:list={["l-emoji-grid", cls]} style={{ "--emoji-size": `${size}px` }} {...props}>
+			{[...Array(count).keys()].map((i) => (
+				<li>
+					<img
+						alt=""
+						class="l-emoji-grid__emoji"
+						src={src}
+						srcset={srcset}
+						width={size}
+						height={size}
+						style={{ "object-position": `${offsetX(i)}px ${offsetY(i)}px` }}
+					/>
+				</li>
+			))}
+		</ul>
+	);
+};
-- 
cgit v1.3.1