diff --git a/.changeset/olive-lizards-rush.md b/.changeset/olive-lizards-rush.md new file mode 100644 index 000000000..4eb3197ef --- /dev/null +++ b/.changeset/olive-lizards-rush.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Show embedded badges in stream cards and timelines diff --git a/src/components/embed-event/event-types/embedded-badge.tsx b/src/components/embed-event/event-types/embedded-badge.tsx new file mode 100644 index 000000000..620a16b5d --- /dev/null +++ b/src/components/embed-event/event-types/embedded-badge.tsx @@ -0,0 +1,45 @@ +import { Link as RouterLink } from "react-router-dom"; +import { + Card, + CardBody, + CardHeader, + CardProps, + Flex, + Heading, + Image, + LinkBox, + LinkOverlay, + Text, +} from "@chakra-ui/react"; + +import { UserAvatarLink } from "../../../components/user-avatar-link"; +import { UserLink } from "../../../components/user-link"; +import { getSharableEventAddress } from "../../../helpers/nip19"; +import { NostrEvent } from "../../../types/nostr-event"; +import { getBadgeDescription, getBadgeImage, getBadgeName } from "../../../helpers/nostr/badges"; + +export default function EmbeddedBadge({ badge, ...props }: Omit & { badge: NostrEvent }) { + const naddr = getSharableEventAddress(badge); + const image = getBadgeImage(badge); + + return ( + + {image && } + + + + {getBadgeName(badge)} + + + + + + Created by: + + + + {getBadgeDescription(badge)} + + + ); +} diff --git a/src/components/embed-event/index.tsx b/src/components/embed-event/index.tsx index 413930ba6..cae719ee1 100644 --- a/src/components/embed-event/index.tsx +++ b/src/components/embed-event/index.tsx @@ -18,6 +18,7 @@ import EmbeddedUnknown from "./event-types/embedded-unknown"; import { NOTE_LIST_KIND, PEOPLE_LIST_KIND } from "../../helpers/nostr/lists"; import EmbeddedList from "./event-types/embedded-list"; import EmbeddedArticle from "./event-types/embedded-article"; +import EmbeddedBadge from "./event-types/embedded-badge"; export type EmbedProps = { goalProps?: EmbeddedGoalOptions; @@ -38,6 +39,8 @@ export function EmbedEvent({ event, goalProps }: { event: NostrEvent } & EmbedPr return ; case Kind.Article: return ; + case Kind.BadgeDefinition: + return ; } return ;