src/ui/layouts/EmojiGrid.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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>
	);
};