feat: added link

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 (
     <div className="infoPanel">
-      {profile && <div className="infoPanelAuthor">{profile}</div>}
+      {profile && (
+        <div className="infoPanelAuthor">
+          {profile}
+          {image?.noteId && (
+            <a className="link" target="_blank" href={`https://nostrapp.link/#${nip19.noteEncode(image?.noteId)}`}>
+              <IconLink></IconLink>
+            </a>
+          )}
+        </div>
+      )}
+
+      <div className="infoPanelContent">{image?.content} </div>
 
-      <div className="infoPanelContent">{image?.content}</div>
       {image.tags.length > 0 && (
         <div className="infoPanelTags">
           {uniq(image?.tags)

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;