MainNoteCard.tsx raw

   1  import PostEditor from '@/components/PostEditor'
   2  import { Separator } from '@/components/ui/separator'
   3  import { useKeyboardNavigable } from '@/hooks/useKeyboardNavigable'
   4  import { toNote } from '@/lib/link'
   5  import { cn } from '@/lib/utils'
   6  import { useSecondaryPage } from '@/PageManager'
   7  import { TNavigationColumn } from '@/providers/KeyboardNavigationProvider'
   8  import { Event } from 'nostr-tools'
   9  import { useState } from 'react'
  10  import Collapsible from '../Collapsible'
  11  import Note from '../Note'
  12  import StuffStats from '../StuffStats'
  13  import PinnedButton from './PinnedButton'
  14  import RepostDescription from './RepostDescription'
  15  
  16  export default function MainNoteCard({
  17    event,
  18    className,
  19    reposters,
  20    embedded,
  21    originalNoteId,
  22    pinned = false,
  23    navColumn,
  24    navIndex
  25  }: {
  26    event: Event
  27    className?: string
  28    reposters?: string[]
  29    embedded?: boolean
  30    originalNoteId?: string
  31    pinned?: boolean
  32    navColumn?: TNavigationColumn
  33    navIndex?: number
  34  }) {
  35    const { push } = useSecondaryPage()
  36    const { ref, isSelected } = useKeyboardNavigable(navColumn ?? 1, navIndex ?? 0, {
  37      meta: { type: 'note', event }
  38    })
  39    const [replyOpen, setReplyOpen] = useState(false)
  40  
  41    return (
  42      <div
  43        ref={ref}
  44        className={cn(className, 'scroll-mt-[6.5rem]', isSelected && 'ring-2 ring-primary ring-inset')}
  45        onClick={(e) => {
  46          e.stopPropagation()
  47          push(toNote(originalNoteId ?? event))
  48        }}
  49      >
  50        <div
  51          className={cn(
  52            'clickable transition-all duration-200',
  53            embedded ? 'p-3 sm:p-4 border rounded-xl bg-card' : 'py-3 hover:bg-accent/30'
  54          )}
  55        >
  56          <Collapsible alwaysExpand={embedded}>
  57            {pinned && <PinnedButton event={event} />}
  58            <RepostDescription className={embedded ? '' : 'px-4'} reposters={reposters} />
  59            <Note
  60              className={embedded ? '' : 'px-4'}
  61              size={embedded ? 'small' : 'normal'}
  62              event={event}
  63              originalNoteId={originalNoteId}
  64            />
  65          </Collapsible>
  66          {!embedded && (
  67            <StuffStats
  68              className="mt-3 px-4"
  69              stuff={event}
  70              onReplyClick={() => setReplyOpen(true)}
  71            />
  72          )}
  73        </div>
  74        {!embedded && <Separator />}
  75        {replyOpen && (
  76          <div onClick={(e) => e.stopPropagation()}>
  77            <PostEditor
  78              inline
  79              parentStuff={event}
  80              open={replyOpen}
  81              setOpen={setReplyOpen}
  82            />
  83          </div>
  84        )}
  85      </div>
  86    )
  87  }
  88