1 files changed, 40 insertions, 0 deletions

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>
+        );
+};