added comment form and updated note metadata

src/components/note/content/index.tsx

@@ -70,7 +70,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
               <MarkdownPreview
                 source={content.current}
                 className={
-                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-medium prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
+                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
                 }
                 linkTarget="_blank"
                 disallowedElements={[
@@ -86,7 +86,12 @@ export const Content = memo(function Content({ data }: { data: any }) {
             </div>
             <>{previewAttachment()}</>
           </div>
-          <NoteMetadata eventID={data.id} eventPubkey={data.pubkey} />
+          <NoteMetadata
+            eventID={data.id}
+            eventPubkey={data.pubkey}
+            eventContent={data.content}
+            eventTime={data.created_at}
+          />
         </div>
       </div>
     </div>

src/components/note/content/metadata.tsx

@@ -5,7 +5,17 @@ import { LikesCounter } from '@components/note/counter/likes';
 import { useLocalStorage } from '@rehooks/local-storage';
 import { useContext, useMemo, useState } from 'react';
 
-export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
+export default function NoteMetadata({
+  eventID,
+  eventPubkey,
+  eventContent,
+  eventTime,
+}: {
+  eventID: string;
+  eventPubkey: string;
+  eventTime: string;
+  eventContent: any;
+}) {
   const relayPool: any = useContext(RelayContext);
   const [relays]: any = useLocalStorage('relays');
 
@@ -46,8 +56,14 @@ export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string
 
   return (
     <div className="relative z-10 -ml-1 flex items-center gap-8">
-      <CommentsCounter comments={comments} />
-      <LikesCounter likes={likes} eventID={eventID} eventPubkey={eventPubkey} />
+      <CommentsCounter
+        count={comments}
+        eventID={eventID}
+        eventPubkey={eventPubkey}
+        eventContent={eventContent}
+        eventTime={eventTime}
+      />
+      <LikesCounter count={likes} eventID={eventID} eventPubkey={eventPubkey} />
     </div>
   );
 }