degmods.com/src/pages/settings/relay.tsx

import { InputField } from 'components/Inputs'

export const RelaySettings = () => {
  return (
    <div className='IBMSMSplitMainFullSideFWMid'>
      <div className='IBMSMSplitMainFullSideSec'>
        <div className='relayList'>
          <div className='inputLabelWrapperMain'>
            <label className='form-label labelMain'>Your relays</label>
          </div>
          {usersRelays.map((relay, index) => (
            <RelayListItem key={index} item={relay} isOwnRelay />
          ))}
        </div>
      </div>

      <div className='IBMSMSplitMainFullSideSec'>
        <InputField
          label='Add Relays'
          placeholder='wss://some-relay.com'
          type='text'
          name='relay'
          value=''
          onChange={() => {}}
        />

        <button className='btn btnMain' type='button'>
          Add
        </button>
      </div>

      <div className='IBMSMSplitMainFullSideSec'>
        <div className='inputLabelWrapperMain'>
          <label className='form-label labelMain'>DEG Mods Relays</label>
          <p className='labelDescriptionMain'>
            We recommend adding one of our relays if you're planning to
            frequently use DEG Mods, for a better experience.
          </p>
        </div>
        <div className='relayList'>
          {degmodsRelays.map((relay, index) => (
            <RelayListItem key={index} item={relay} />
          ))}
        </div>
      </div>

      <div className='IBMSMSplitMainFullSideSec'>
        <div className='inputLabelWrapperMain'>
          <label className='form-label labelMain'>Recommended Relays</label>
          <p className='labelDescriptionMain'>
            Relays we recommend using as they support the same functionalities
            that our relays provide.
          </p>
        </div>
        <div className='relayList'>
          {recommendRelays.map((relay, index) => (
            <RelayListItem key={index} item={relay} />
          ))}
        </div>
      </div>
    </div>
  )
}

const RelayListItem = ({
  item,
  isOwnRelay
}: {
  item: RelayItem
  isOwnRelay?: boolean
}) => {
  return (
    <div className='relayListItem'>
      <div className='relayListItemSec relayListItemSecPic'>
        <div
          className='relayListItemSecPicImg'
          style={{
            background: item.backgroundColor
          }}
        ></div>
      </div>
      <div className='relayListItemSec relayListItemSecDetails'>
        <p className='relayListItemSecDetailsText'>{item.url}</p>
        <div className='relayListItemSecDetailsExtra'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-64 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
            data-bs-toggle='tooltip'
            data-bss-tooltip
            aria-label={item.readTitle}
          >
            <path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z'></path>
          </svg>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 -32 576 576'
            width='1em'
            height='1em'
            fill='currentColor'
            data-bs-toggle='tooltip'
            data-bss-tooltip
            aria-label={item.writeTitle}
          >
            <path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z'></path>
          </svg>
          {item.subscribedTitle && (
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='0 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
              data-bs-toggle='tooltip'
              data-bss-tooltip
              aria-label={item.subscribedTitle}
            >
              <path d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-141.651-35.33c4.937-32.999-20.191-50.739-54.55-62.573l11.146-44.702-27.213-6.781-10.851 43.524c-7.154-1.783-14.502-3.464-21.803-5.13l10.929-43.81-27.198-6.781-11.153 44.686c-5.922-1.349-11.735-2.682-17.377-4.084l.031-.14-37.53-9.37-7.239 29.062s20.191 4.627 19.765 4.913c11.022 2.751 13.014 10.044 12.68 15.825l-12.696 50.925c.76.194 1.744.473 2.829.907-.907-.225-1.876-.473-2.876-.713l-17.796 71.338c-1.349 3.348-4.767 8.37-12.471 6.464.271.395-19.78-4.937-19.78-4.937l-13.51 31.147 35.414 8.827c6.588 1.651 13.045 3.379 19.4 5.006l-11.262 45.213 27.182 6.781 11.153-44.733a1038.209 1038.209 0 0 0 21.687 5.627l-11.115 44.523 27.213 6.781 11.262-45.128c46.404 8.781 81.299 5.239 95.986-36.727 11.836-33.79-.589-53.281-25.004-65.991 17.78-4.098 31.174-15.792 34.747-39.949zm-62.177 87.179c-8.41 33.79-65.308 15.523-83.755 10.943l14.944-59.899c18.446 4.603 77.6 13.717 68.811 48.956zm8.417-87.667c-7.673 30.736-55.031 15.12-70.393 11.292l13.548-54.327c15.363 3.828 64.836 10.973 56.845 43.035z'></path>
            </svg>
          )}
        </div>
      </div>
      <div className='relayListItemSec relayListItemSecActions'>
        {isOwnRelay && (
          <div
            className='dropstart dropdownMain'
            style={{ position: 'absolute' }}
          >
            <button
              className='btn btnMain'
              aria-expanded='false'
              data-bs-toggle='dropdown'
              type='button'
            >
              <svg
                xmlns='http://www.w3.org/2000/svg'
                viewBox='-192 0 512 512'
                width='1em'
                height='1em'
                fill='currentColor'
              >
                <path d='M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z'></path>
              </svg>
            </button>
            <div
              className='dropdown-menu dropdownMainMenu'
              style={{ position: 'absolute' }}
            >
              <a className='dropdown-item dropdownMainMenuItem' href='#'>
                Remove
              </a>
              <a className='dropdown-item dropdownMainMenuItem' href='#'>
                Details
              </a>
            </div>
          </div>
        )}
        {!isOwnRelay && (
          <button className='btn btnMain' type='button'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-32 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
            </svg>
          </button>
        )}
      </div>
    </div>
  )
}

interface RelayItem {
  url: string
  backgroundColor: string
  readTitle: string
  writeTitle: string
  subscribedTitle: string
}

const usersRelays: RelayItem[] = [
  {
    url: 'wss://relay.wibblywobbly.com',
    backgroundColor: '#cd4d45',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  },
  {
    url: 'wss://relay.wibblywobbly.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: 'Paid (Subscribed)'
  },
  {
    url: 'wss://relay.degmods.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  }
]

const degmodsRelays: RelayItem[] = [
  {
    url: 'wss://relay1.degmods.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  },
  {
    url: 'wss://relay2.degmods.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  }
]

const recommendRelays: RelayItem[] = [
  {
    url: 'wss://relay1.degmods.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  },
  {
    url: 'wss://relay2.degmods.com',
    backgroundColor: '#60ae60',
    readTitle: 'Read',
    writeTitle: 'Write',
    subscribedTitle: ''
  }
]