highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-06-05 18:21:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(emoji): simplify detail renderer layout

Browse Source
This commit is contained in:
Claude
2026-01-08 15:43:06 +00:00
parent f3030ad9e6
commit 704a630ac5
1 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
View File

@@ -2,7 +2,6 @@ import { getTagValue } from "applesauce-core/helpers";
import { getEmojiTags } from "@/lib/emoji-helpers";
import { CustomEmoji } from "@/components/nostr/CustomEmoji";
import { NostrEvent } from "@/types/nostr";
import { Smile } from "lucide-react";
/**
* Kind 30030 Detail Renderer - Emoji Set (Detail View)
@@ -15,15 +14,7 @@ export function EmojiSetDetailRenderer({ event }: { event: NostrEvent }) {
return (
<div className="flex flex-col gap-4 p-4">
{/* Header */}
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-bold flex items-center gap-2">
<Smile className="size-6 text-muted-foreground" />
{identifier}
</h1>
<p className="text-sm text-muted-foreground">
{emojis.length} emoji{emojis.length !== 1 ? "s" : ""} in this set
</p>
</div>
<h1 className="text-2xl font-bold">{identifier}</h1>
{/* Empty state */}
{emojis.length === 0 ? (
@@ -31,25 +22,32 @@ export function EmojiSetDetailRenderer({ event }: { event: NostrEvent }) {
This emoji set is empty
</div>
) : (
/* Emoji grid */
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
{emojis.map((emoji) => (
<div
key={emoji.shortcode}
className="flex flex-col items-center gap-2 p-3 rounded-lg bg-muted/30"
title={`:${emoji.shortcode}:`}
>
<CustomEmoji
shortcode={emoji.shortcode}
url={emoji.url}
size="lg"
/>
<div className="text-xs text-muted-foreground font-mono truncate max-w-full px-1">
:{emoji.shortcode}:
<>
{/* Emoji grid */}
<div className="grid grid-cols-6 gap-2">
{emojis.map((emoji) => (
<div
key={emoji.shortcode}
className="flex flex-col items-center gap-2 p-3 rounded-lg bg-muted/30"
title={`:${emoji.shortcode}:`}
>
<CustomEmoji
shortcode={emoji.shortcode}
url={emoji.url}
size="lg"
/>
<div className="text-xs text-muted-foreground font-mono truncate max-w-full px-1">
:{emoji.shortcode}:
</div>
</div>
</div>
))}
</div>
))}
</div>
{/* Count */}
<p className="text-sm text-muted-foreground">
{emojis.length} emoji{emojis.length !== 1 ? "s" : ""} in this set
</p>
</>
)}
</div>
);