diff --git a/src/components/InfoPanel/index.tsx b/src/components/InfoPanel/index.tsx index d2d3bfa..6092085 100644 --- a/src/components/InfoPanel/index.tsx +++ b/src/components/InfoPanel/index.tsx @@ -7,6 +7,8 @@ import { ViewMode } from '../SlideShow'; import AuthorProfile from '../AuthorProfile'; import useProfile from '../../utils/useProfile'; import { useGlobalState } from '../../utils/globalState'; +import IconLink from '../Icons/IconLink'; +import { nip19 } from 'nostr-tools'; type InfoPanelProps = { image: NostrImage; @@ -31,9 +33,19 @@ const InfoPanel = ({ image, onClose, setViewMode, settings }: InfoPanelProps) => return (
- {profile &&
{profile}
} + {profile && ( +
+ {profile} + {image?.noteId && ( + + + + )} +
+ )} + +
{image?.content}
-
{image?.content}
{image.tags.length > 0 && (
{uniq(image?.tags) diff --git a/src/components/InfoPanel/styles.css b/src/components/InfoPanel/styles.css index d96fb70..3c82980 100644 --- a/src/components/InfoPanel/styles.css +++ b/src/components/InfoPanel/styles.css @@ -13,8 +13,17 @@ width: 80dvw; display: flex; flex-direction: column; + gap: 4px; } +.infoPanel .link svg { + padding: 0.5em; + width: 1.5em; + height: 1.5em; + cursor: pointer; + color: white; + } + .infoPanelContent { padding-left: 1em; padding-right: 1em; @@ -65,6 +74,15 @@ } } +.infoPanelAuthor { + display: flex; + flex-direction: row; +} + +.infoPanelAuthor .link { + padding: 1em; +} + .infoPanelAuthor .author-info { position: relative; left: initial; @@ -72,6 +90,7 @@ padding-left: 1em; padding-top: 1em; display: flex; + flex-grow: 1; flex-direction: row; gap: 8px; align-items: center;