resume_builder/lib/views/basics.ex

defmodule CvGenView.Basics do
  use Phoenix.Component

  attr(:name, :string, required: true)
  attr(:title, :string, required: true)

  def basics(assigns) do
    ~H"""
    <h1><%= @name %></h1>
    <h2><%= @title %></h2>
    """
  end

  def about(assigns),
    do: ~H"""
    <p><%= @summary %></p>
    """

  def contact(assigns),
    do: ~H"""
    <dl>
      <dt class="location">📍</dt>
      <dd class="location"><%= @location.city %></dd>
      <dt class="mail">📧</dt>
      <dd class="mail"><a href={"mailto: #{@email}"}><%= @email %></a></dd>
      <dt class="profiles"></dt>
      <dd class="profiles">
        <ul>
          <%= for profile <- @profiles do %>
            <li><a href={profile.url}><%= profile.network %></a></li>
          <% end %>
        </ul>
      </dd>
    </dl>
    """

  def css(),
    do: """
    #basics {
      display: grid;
      justify-items: center;
    }

    #basics > h1 {
      text-transform: uppercase;
      font-weight: 700;
      font-size: 2em;
    }

    #basics > h2 {
      text-transform: uppercase;
      color: #334960;
      opacity: 0.7;
      text-align: center;
      max-width: 30ch;
    }

    #contact dl {
      column-gap: 1em;
    }

    #contact .mail a {
      font-weight: bold;
    }
    """
end