You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.0 KiB
54 lines
2.0 KiB
import { toRelay } from '@/lib/link' |
|
import { useSecondaryPage } from '@/PageManager' |
|
import { useSortable } from '@dnd-kit/sortable' |
|
import { CSS } from '@dnd-kit/utilities' |
|
import { GripVertical } from 'lucide-react' |
|
import { useTranslation } from 'react-i18next' |
|
import RelayIcon from '../RelayIcon' |
|
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu' |
|
|
|
export default function RelayItem({ relay, isBlocked = false }: { relay: string; isBlocked?: boolean }) { |
|
const { t } = useTranslation() |
|
const { push } = useSecondaryPage() |
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ |
|
id: relay |
|
}) |
|
|
|
const style = { |
|
transform: CSS.Transform.toString(transform), |
|
transition, |
|
opacity: isDragging ? 0.5 : 1 |
|
} |
|
|
|
return ( |
|
<div |
|
className={`relative group clickable flex min-w-0 gap-1 rounded-lg border p-2 select-none sm:gap-2 ${isBlocked ? 'opacity-60' : ''}`} |
|
ref={setNodeRef} |
|
style={style} |
|
onClick={() => push(toRelay(relay))} |
|
> |
|
<div |
|
className="shrink-0 cursor-grab touch-none rounded p-2 hover:bg-muted active:cursor-grabbing" |
|
{...attributes} |
|
{...listeners} |
|
onClick={(e) => e.stopPropagation()} |
|
> |
|
<GripVertical className="size-4 text-muted-foreground" /> |
|
</div> |
|
<div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"> |
|
<div className="flex min-w-0 flex-1 items-start gap-2"> |
|
<RelayIcon url={relay} skipRelayInfoFetch={isBlocked} className="mt-0.5 shrink-0" /> |
|
<div className="min-w-0 flex-1"> |
|
<div className="break-all text-sm font-semibold leading-snug">{relay}</div> |
|
{isBlocked ? ( |
|
<span className="mt-0.5 block text-xs text-muted-foreground">({t('blocked')})</span> |
|
) : null} |
|
</div> |
|
</div> |
|
<div className="shrink-0 self-end sm:self-center" onClick={(e) => e.stopPropagation()}> |
|
<SaveRelayDropdownMenu urls={[relay]} /> |
|
</div> |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|