index.tsx raw

   1  import { Skeleton } from '@/components/ui/skeleton'
   2  import { cn } from '@/lib/utils'
   3  import { TRelayInfo } from '@/types'
   4  import { HTMLProps } from 'react'
   5  import { useTranslation } from 'react-i18next'
   6  import RelayIcon from '../RelayIcon'
   7  import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
   8  import { SimpleUserAvatar } from '../UserAvatar'
   9  
  10  export default function RelaySimpleInfo({
  11    relayInfo,
  12    users,
  13    className,
  14    ...props
  15  }: HTMLProps<HTMLDivElement> & {
  16    relayInfo?: TRelayInfo
  17    users?: string[]
  18  }) {
  19    const { t } = useTranslation()
  20  
  21    return (
  22      <div className={cn('space-y-1', className)} {...props}>
  23        <div className="flex items-start justify-between gap-2 w-full">
  24          <div className="flex flex-1 w-0 items-center gap-2">
  25            <RelayIcon url={relayInfo?.url} className="h-9 w-9" />
  26            <div className="flex-1 w-0">
  27              <div className="truncate font-semibold">{relayInfo?.name || relayInfo?.shortUrl}</div>
  28              {relayInfo?.name && (
  29                <div className="text-xs text-muted-foreground truncate">{relayInfo?.shortUrl}</div>
  30              )}
  31            </div>
  32          </div>
  33          {relayInfo && <SaveRelayDropdownMenu urls={[relayInfo.url]} />}
  34        </div>
  35        {!!relayInfo?.description && (
  36          <div
  37            className="line-clamp-3 break-words whitespace-pre-wrap"
  38            style={{
  39              overflowWrap: 'anywhere'
  40            }}
  41          >
  42            {relayInfo.description}
  43          </div>
  44        )}
  45        {!!users?.length && (
  46          <div className="flex items-center gap-2">
  47            <div className="text-muted-foreground">{t('Favorited by')} </div>
  48            <div className="flex items-center gap-1">
  49              {users.slice(0, 10).map((user) => (
  50                <SimpleUserAvatar key={user} userId={user} size="xSmall" />
  51              ))}
  52              {users.length > 10 && (
  53                <div className="text-muted-foreground text-xs rounded-full bg-muted w-5 h-5 flex items-center justify-center">
  54                  +{users.length - 10}
  55                </div>
  56              )}
  57            </div>
  58          </div>
  59        )}
  60      </div>
  61    )
  62  }
  63  
  64  export function RelaySimpleInfoSkeleton({ className }: { className?: string }) {
  65    return (
  66      <div className={cn('space-y-1', className)}>
  67        <div className="flex items-center gap-2 w-full">
  68          <Skeleton className="h-9 w-9 rounded-full" />
  69          <div className="flex-1 w-0 space-y-1">
  70            <Skeleton className="w-40 h-5" />
  71            <Skeleton className="w-20 h-4" />
  72          </div>
  73        </div>
  74        <Skeleton className="w-full h-4" />
  75        <Skeleton className="w-2/3 h-4" />
  76      </div>
  77    )
  78  }
  79