index.tsx raw

   1  import { useFetchRelayInfo } from '@/hooks'
   2  import { cn } from '@/lib/utils'
   3  import { Server } from 'lucide-react'
   4  import { useMemo } from 'react'
   5  import Image from '../Image'
   6  
   7  export default function RelayIcon({
   8    url,
   9    className,
  10    classNames
  11  }: {
  12    url?: string
  13    className?: string
  14    classNames?: {
  15      fallback?: string
  16    }
  17  }) {
  18    const { relayInfo } = useFetchRelayInfo(url)
  19    const iconUrl = useMemo(() => {
  20      if (relayInfo?.icon) {
  21        return relayInfo.icon
  22      }
  23      if (!url) return
  24      const u = new URL(url)
  25      return `${u.protocol === 'wss:' ? 'https:' : 'http:'}//${u.host}/favicon.ico`
  26    }, [url, relayInfo])
  27  
  28    const fallback = <Server className={cn('size-5 bg-transparent', classNames?.fallback)} />
  29  
  30    if (!iconUrl) {
  31      return fallback
  32    }
  33  
  34    return (
  35      <Image
  36        image={{ url: iconUrl, dim: { width: 20, height: 20 } }}
  37        className={cn('size-6 rounded-full', className)}
  38        classNames={{
  39          skeleton: cn('size-6 rounded-full', className),
  40          errorPlaceholder: 'bg-transparent rounded-none shrink-0'
  41        }}
  42        errorPlaceholder={fallback}
  43      />
  44    )
  45  }
  46