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">📍</dt>
      <dd class="location"><%= @location.city %></dd>
      <dt class="mail">📧</dt>
      <dd class="mail"><a href={"mailto: #{@email}"}><%= @email %></a></dd>
      <%= if @linked_in do %>
        <dt class="linked_in">LinkedIn</dt>
        <dd class="linked_in"><a href={@linked_in}><%= @linked_in %></a></dd>
      <% end %>
    </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