diff options
| author | Volpeon <git@volpeon.ink> | 2026-07-22 22:35:13 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-07-22 22:35:13 +0200 |
| commit | ed26bc548a3a7ba87baa7e026fecaf3449e8442c (patch) | |
| tree | 6d9cd1eb1005c214f0ac753278bac8b7e06cca6b /src/ui/layouts | |
| parent | Package cleanup (diff) | |
| download | corvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.tar.gz corvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.tar.bz2 corvos-website-ed26bc548a3a7ba87baa7e026fecaf3449e8442c.zip | |
Remove emoji components
Diffstat (limited to 'src/ui/layouts')
| -rw-r--r-- | src/ui/layouts/EmojiGrid.tsx | 40 |
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 @@ | |||
| 1 | import type { HTMLAttributes } from "corvos/plugins/jsx.ts"; | ||
| 2 | |||
| 3 | export type Props = HTMLAttributes<"ul"> & { | ||
| 4 | id: string; | ||
| 5 | sprite: { | ||
| 6 | variants: { size: number; space: number }[]; | ||
| 7 | wrap: number; | ||
| 8 | }; | ||
| 9 | count: number; | ||
| 10 | }; | ||
| 11 | |||
| 12 | export 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 | }; | ||
