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
    supported_profiles = [:linked_in] |> Map.new(&{&1, nil})

    flat_profiles =
      assigns.profiles |> Map.new(&{&1.network |> Macro.underscore() |> String.to_atom(), &1.url})

    assigns = assigns |> Map.merge(supported_profiles) |> Map.merge(flat_profiles)

    ~H"""
    <dl>
      <dt class="location"><.pinpoint_icon /></dt>
      <dd class="location"><%= @location.city %></dd>
      <dt class="mail"><.email_icon /></dt>
      <dd class="mail"><a href={"mailto: #{@email}"}><%= @email %></a></dd>
      <%= if @linked_in do %>
        <dt class="linked_in"><.linked_in_icon /></dt>
        <dd class="linked_in"><a href={@linked_in}><%= @linked_in %></a></dd>
      <% end %>
    </dl>
    """
  end

  defp email_icon(assigns),
    do: ~H"""
    <svg
      version="1.1"
      id="Capa_1"
      viewBox="0 0 75.294 75.294"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xml:space="preserve"
    >
      <g>
        <path d="M66.097,12.089h-56.9C4.126,12.089,0,16.215,0,21.286v32.722c0,5.071,4.126,9.197,9.197,9.197h56.9   c5.071,0,9.197-4.126,9.197-9.197V21.287C75.295,16.215,71.169,12.089,66.097,12.089z M61.603,18.089L37.647,33.523L13.691,18.089   H61.603z M66.097,57.206h-56.9C7.434,57.206,6,55.771,6,54.009V21.457l29.796,19.16c0.04,0.025,0.083,0.042,0.124,0.065   c0.043,0.024,0.087,0.047,0.131,0.069c0.231,0.119,0.469,0.215,0.712,0.278c0.025,0.007,0.05,0.01,0.075,0.016   c0.267,0.063,0.537,0.102,0.807,0.102c0.001,0,0.002,0,0.002,0c0.002,0,0.003,0,0.004,0c0.27,0,0.54-0.038,0.807-0.102   c0.025-0.006,0.05-0.009,0.075-0.016c0.243-0.063,0.48-0.159,0.712-0.278c0.044-0.022,0.088-0.045,0.131-0.069   c0.041-0.023,0.084-0.04,0.124-0.065l29.796-19.16v32.551C69.295,55.771,67.86,57.206,66.097,57.206z" />
      </g>
    </svg>
    """

  defp linked_in_icon(assigns),
    do: ~H"""
    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
      <g fill="none" fill-rule="evenodd">
        <path
          d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
          fill="#007EBB"
        /><path
          d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
          fill="#FFF"
        />
      </g>
    </svg>
    """

  defp pinpoint_icon(assigns),
    do: ~H"""
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 297 297"
      xml:space="preserve"
    >
      <g>
        <path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645   c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645   C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892   c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z" />
        <path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614   c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901   c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104   C179.265,127.948,165.464,141.901,148.5,141.901z" />
      </g>
    </svg>
    """

  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 dl > dt {
      justify-self: center;
    }

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

    #contact dt.mail,
    #contact dt.linked_in,
    #contact dt.location {
      width: 30px;
      height: 30px;
    }
    """
end