diff --git a/frontend/src/components/explore-page/note-tags/note-tags.tsx b/frontend/src/components/explore-page/note-tags/note-tags.tsx new file mode 100644 index 000000000..52dfdd292 --- /dev/null +++ b/frontend/src/components/explore-page/note-tags/note-tags.tsx @@ -0,0 +1,33 @@ +/* + * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import React, { useCallback, type MouseEvent } from 'react' +import { Badge } from 'react-bootstrap' + +export interface NoteTagsProps { + tags: string[] + onClickTag?: (tag: string) => void + hoverLabel?: string +} + +export const NoteTags: React.FC = ({ tags, onClickTag, hoverLabel }) => { + const onMouseEvent = useCallback( + (tag: string) => (event: MouseEvent) => { + event.preventDefault() + onClickTag?.(tag) + }, + [onClickTag] + ) + + if (tags.length === 0) { + return null + } + + return tags.map((tag) => ( + + {tag} + + )) +} diff --git a/frontend/src/components/explore-page/pinned-notes/pinned-note-card.tsx b/frontend/src/components/explore-page/pinned-notes/pinned-note-card.tsx index 24bb75ecd..c9a322719 100644 --- a/frontend/src/components/explore-page/pinned-notes/pinned-note-card.tsx +++ b/frontend/src/components/explore-page/pinned-notes/pinned-note-card.tsx @@ -15,6 +15,7 @@ import { UiIcon } from '../../common/icons/ui-icon' import Link from 'next/link' import { useTranslatedText } from '../../../hooks/common/use-translated-text' import { useRouter } from 'next/navigation' +import { NoteTags } from '../note-tags/note-tags' export interface NoteCardProps { title: string @@ -51,14 +52,6 @@ export const PinnedNoteCard: React.FC = ({ title, id, lastVisited [router] ) - const tagsChips = useMemo(() => { - return tags.map((tag) => ( - - {tag} - - )) - }, [tags, onClickTag, labelTag]) - return ( @@ -73,7 +66,9 @@ export const PinnedNoteCard: React.FC = ({ title, id, lastVisited {lastVisitedString} -
{tagsChips}
+
+ +
)