         span className: "fa-fw #{icon}"
 
       component
-        href: href
+        href: url
         className: componentClass
-        text?(value) ? value
+        text
 
 
   renderText: (key) =>



  linkMapping =
    twitter:
      icon: 'fab fa-twitter'
      url: (val) -> "https://twitter.com/#{val}"
      text: (val) -> "@#{val}"
    discord:
      icon: 'fab fa-discord'
      text: (val) ->
        el ClickToCopy, value: val, modifiers: ['profile-header-extra']
    interests:
      icon: 'far fa-heart'
    skype:
      icon: 'fab fa-skype'
      url: (val) -> "skype:#{val}?chat"
    lastfm:
      icon: 'fab fa-lastfm'
      url: (val) -> "https://last.fm/user/#{val}"
    location:
      icon: 'fas fa-map-marker-alt'
    occupation:
      icon: 'fas fa-suitcase'
    website:
      icon: 'fas fa-link'
      url: (val) -> val
      text: (val) -> val.replace(/^https?:\/\//, '')


  textMapping =


    return unless value?

    {url, icon, text, title} = linkMapping[key](value)

    title ?= osu.trans "users.show.info.#{key}"
    text ?= value

    componentClass = "u-ellipsis-overflow #{bn}__value"

    if url?
      component = a
      componentClass += " #{bn}__value--link"
    else
      component = span

    div
      className: "#{bn}__item"
