RelayItem.tsx raw

   1  import { toRelay } from '@/lib/link'
   2  import { useSecondaryPage } from '@/PageManager'
   3  import { useSortable } from '@dnd-kit/sortable'
   4  import { CSS } from '@dnd-kit/utilities'
   5  import { GripVertical } from 'lucide-react'
   6  import RelayIcon from '../RelayIcon'
   7  import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
   8  
   9  export default function RelayItem({ relay }: { relay: string }) {
  10    const { push } = useSecondaryPage()
  11    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
  12      id: relay
  13    })
  14  
  15    const style = {
  16      transform: CSS.Transform.toString(transform),
  17      transition,
  18      opacity: isDragging ? 0.5 : 1
  19    }
  20  
  21    return (
  22      <div
  23        className="relative group clickable flex gap-2 border rounded-lg p-2 pr-2.5 items-center justify-between select-none"
  24        ref={setNodeRef}
  25        style={style}
  26        onClick={() => push(toRelay(relay))}
  27      >
  28        <div className="flex items-center gap-1 flex-1">
  29          <div
  30            className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none shrink-0"
  31            {...attributes}
  32            {...listeners}
  33          >
  34            <GripVertical className="size-4 text-muted-foreground" />
  35          </div>
  36          <div className="flex gap-2 items-center flex-1">
  37            <RelayIcon url={relay} />
  38            <div className="flex-1 w-0 truncate font-semibold">{relay}</div>
  39          </div>
  40        </div>
  41        <SaveRelayDropdownMenu urls={[relay]} />
  42      </div>
  43    )
  44  }
  45