EmbeddedNote.tsx raw

   1  import { Skeleton } from '@/components/ui/skeleton'
   2  import { useFetchEvent } from '@/hooks'
   3  import { cn } from '@/lib/utils'
   4  import { useTranslation } from 'react-i18next'
   5  import ClientSelect from '../ClientSelect'
   6  import MainNoteCard from '../NoteCard/MainNoteCard'
   7  
   8  export function EmbeddedNote({ noteId, className }: { noteId: string; className?: string }) {
   9    const { event, isFetching } = useFetchEvent(noteId)
  10  
  11    if (isFetching) {
  12      return <EmbeddedNoteSkeleton className={className} />
  13    }
  14  
  15    if (!event) {
  16      return <EmbeddedNoteNotFound className={className} noteId={noteId} />
  17    }
  18  
  19    return (
  20      <MainNoteCard
  21        className={cn('w-full', className)}
  22        event={event}
  23        embedded
  24        originalNoteId={noteId}
  25      />
  26    )
  27  }
  28  
  29  function EmbeddedNoteSkeleton({ className }: { className?: string }) {
  30    return (
  31      <div
  32        className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}
  33        onClick={(e) => e.stopPropagation()}
  34      >
  35        <div className="flex items-center space-x-2">
  36          <Skeleton className="w-9 h-9 rounded-full" />
  37          <div>
  38            <Skeleton className="h-3 w-16 my-1" />
  39            <Skeleton className="h-3 w-16 my-1" />
  40          </div>
  41        </div>
  42        <Skeleton className="w-full h-4 my-1 mt-2" />
  43        <Skeleton className="w-2/3 h-4 my-1" />
  44      </div>
  45    )
  46  }
  47  
  48  function EmbeddedNoteNotFound({ noteId, className }: { noteId: string; className?: string }) {
  49    const { t } = useTranslation()
  50  
  51    return (
  52      <div className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}>
  53        <div className="flex flex-col items-center text-muted-foreground font-medium gap-2">
  54          <div>{t('Sorry! The note cannot be found 😔')}</div>
  55          <ClientSelect className="w-full mt-2" originalNoteId={noteId} />
  56        </div>
  57      </div>
  58    )
  59  }
  60