index.tsx raw

   1  import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
   2  import { Separator } from '@/components/ui/separator'
   3  import { useState } from 'react'
   4  import HideUntrustedContentButton from '../HideUntrustedContentButton'
   5  import QuoteList from '../QuoteList'
   6  import ReactionList from '../ReactionList'
   7  import ReplyNoteList from '../ReplyNoteList'
   8  import { Tabs, TTabValue } from './Tabs'
   9  
  10  export default function ExternalContentInteractions({
  11    externalContent
  12  }: {
  13    externalContent: string
  14  }) {
  15    const [type, setType] = useState<TTabValue>('replies')
  16    let list
  17    switch (type) {
  18      case 'replies':
  19        list = <ReplyNoteList stuff={externalContent} />
  20        break
  21      case 'reactions':
  22        list = <ReactionList stuff={externalContent} />
  23        break
  24      case 'quotes':
  25        list = <QuoteList stuff={externalContent} />
  26        break
  27      default:
  28        break
  29    }
  30  
  31    return (
  32      <>
  33        <div className="flex items-center justify-between">
  34          <ScrollArea className="flex-1 w-0">
  35            <Tabs selectedTab={type} onTabChange={setType} />
  36            <ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
  37          </ScrollArea>
  38          <Separator orientation="vertical" className="h-6" />
  39          <div className="size-10 flex items-center justify-center">
  40            <HideUntrustedContentButton type="interactions" />
  41          </div>
  42        </div>
  43        <Separator />
  44        {list}
  45      </>
  46    )
  47  }
  48