# svelma-pro
Social media UI element

# Media

## Social media UI element

Codesandbox

    <script>
      import { onDestroy, onMount } from 'svelte'
      import { fade } from 'svelte/transition'

      let user

      const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())

      async function updateUser() {
        user = null
        user = (await (await fetch('https://randomuser.me/api/')).json()).results[0]
      }
    </script>

    <button class="button is-primary" on:click={updateUser}>Fetch New User</button>

    <br />
    <br />

    <div class="box">
      <article class="media">
        <div class="media-left">
          <figure class="image is-64x64">
            {#if user}
              <img transition:fade class="is-rounded" src={user.picture.medium} alt="Profile picture" />
            {/if}
          </figure>
        </div>
        <div class="media-content">
          <div class="content">
            {#if user}
              <p transition:fade>
                <strong>{titleize(user.name.first)} {titleize(user.name.last)}</strong>
                <small>@{user.login.username}</small>
                <small />
                <br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
                egestas. Nullam condimentum luctus turpis.
              </p>
            {/if}
          </div>
          {#if user}
            <nav class="level is-mobile" transition:fade>
              <div class="level-left">
                <a href class="level-item" aria-label="reply">
                  <span class="icon is-small">
                    <i class="fas fa-reply" aria-hidden="true" />
                  </span>
                </a>
                <a href class="level-item" aria-label="retweet">
                  <span class="icon is-small">
                    <i class="fas fa-retweet" aria-hidden="true" />
                  </span>
                </a>
                <a href class="level-item" aria-label="like">
                  <span class="icon is-small">
                    <i class="fas fa-heart" aria-hidden="true" />
                  </span>
                </a>
              </div>
            </nav>
          {/if}
        </div>
      </article>
    </div>