feat: add support for commenting and reacting on external content

src/components/ExternalContentInteractions/index.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import { Separator } from '@/components/ui/separator'
+import { useState } from 'react'
+import HideUntrustedContentButton from '../HideUntrustedContentButton'
+import ReplyNoteList from '../ReplyNoteList'
+import { Tabs, TTabValue } from './Tabs'
+import ReactionList from '../ReactionList'
+
+export default function ExternalContentInteractions({
+  pageIndex,
+  externalContent
+}: {
+  pageIndex?: number
+  externalContent: string
+}) {
+  const [type, setType] = useState<TTabValue>('replies')
+  let list
+  switch (type) {
+    case 'replies':
+      list = <ReplyNoteList index={pageIndex} stuff={externalContent} />
+      break
+    case 'reactions':
+      list = <ReactionList stuff={externalContent} />
+      break
+    default:
+      break
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <ScrollArea className="flex-1 w-0">
+          <Tabs selectedTab={type} onTabChange={setType} />
+          <ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
+        </ScrollArea>
+        <Separator orientation="vertical" className="h-6" />
+        <div className="size-10 flex items-center justify-center">
+          <HideUntrustedContentButton type="interactions" />
+        </div>
+      </div>
+      <Separator />
+      {list}
+    </>
+  )
+}