summaryrefslogtreecommitdiffstats
path: root/src/ui/layouts/EmojiGrid.tsx
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 22:35:13 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 22:35:13 +0200
commited26bc548a3a7ba87baa7e026fecaf3449e8442c (patch)
tree6d9cd1eb1005c214f0ac753278bac8b7e06cca6b /src/ui/layouts/EmojiGrid.tsx
parentPackage cleanup (diff)
downloadcorvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.tar.gz
corvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.tar.bz2
corvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.zip
Remove emoji components
Diffstat (limited to 'src/ui/layouts/EmojiGrid.tsx')
-rw-r--r--src/ui/layouts/EmojiGrid.tsx40
1 files changed, 0 insertions, 40 deletions
diff --git a/src/ui/layouts/EmojiGrid.tsx b/src/ui/layouts/EmojiGrid.tsx
deleted file mode 100644
index 5dc9266..0000000
--- a/src/ui/layouts/EmojiGrid.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
1import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
2
3export type Props = HTMLAttributes<"ul"> & {
4 id: string;
5 sprite: {
6 variants: { size: number; space: number }[];
7 wrap: number;
8 };
9 count: number;
10};
11
12export const EmojiGrid = ({ id, sprite, count, class: cls, ...props }: Props) => {
13 const size = sprite.variants[0]?.size ?? 48;
14 const space = sprite.variants[0]?.space ?? 2;
15 const { wrap } = sprite;
16
17 const src = `/emojis/${id}/sprite48.avif`;
18 const srcset = `/emojis/${id}/sprite48.avif 1x, /emojis/${id}/sprite96.avif 2x`;
19
20 const offsetX = (i: number) => -1 * (size + space) * (i % wrap);
21 const offsetY = (i: number) => -1 * (size + space) * Math.floor(i / wrap);
22
23 return (
24 <ul class:list={["l-emoji-grid", cls]} style={{ "--emoji-size": `${size}px` }} {...props}>
25 {[...Array(count).keys()].map((i) => (
26 <li>
27 <img
28 alt=""
29 class="l-emoji-grid__emoji"
30 src={src}
31 srcset={srcset}
32 width={size}
33 height={size}
34 style={{ "object-position": `${offsetX(i)}px ${offsetY(i)}px` }}
35 />
36 </li>
37 ))}
38 </ul>
39 );
40};