File size: 970 Bytes
b2a00c5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from 'react'
import { Annotation } from './annotations'
import {
  AnnotationAuthorshipLine,
  AnnotationItemRow,
  AnnotationNote,
  AnnotationsListContainer
} from './annotation-list-items'

const MAX_PREVIEW = 2

export const HoverAnnotationsList = ({
  annotations
}: {
  annotations: Annotation[]
}) => {
  const preview = annotations.slice(0, MAX_PREVIEW)
  const extra = annotations.length - MAX_PREVIEW

  return (
    <>
      <AnnotationsListContainer>
        {preview.map((annotation) => (
          <AnnotationItemRow key={annotation.id}>
            <div className="relative flex flex-col gap-y-px w-full max-w-64">
              <AnnotationAuthorshipLine annotation={annotation} />
              <AnnotationNote note={annotation.note} clamp />
            </div>
          </AnnotationItemRow>
        ))}
      </AnnotationsListContainer>
      {extra === 1 && `and 1 more note`}
      {extra > 1 && `and ${extra} more notes`}
    </>
  )
}