resume_builder/lib/views/work.ex

defmodule CvGenView.Work do
  use Phoenix.Component
  alias CvGenView.Date

  attr(:name, :string, required: true)
  attr(:start_date, :any, required: true)
  attr(:end_date, :any, default: nil)
  attr(:summary, :string, required: true)
  attr(:location, :string, required: true)
  attr(:highlights, :list, required: true)

  def work(assigns) do
    ~H"""
    <div class="work">
      <div class="heading">
        <h1><%= @name %></h1>
        <span class="location"><%= @location %></span>
        <div class="period">
          <Date.date date={@start_date} /> - <Date.date date={@end_date} />
        </div>
      </div>

      <h1><%= @position %></h1>

      <p class="summary" lang="en"><%= @summary %></p>

      <ul class="highlights">
        <%= for highlight <- @highlights do %>
          <li><%= highlight %></li>
        <% end %>
      </ul>
    </div>
    """
  end

  def css,
    do: """
    .work h1 {
      margin: 0;
    }

    .work > * {
      padding-left: 0.5em;
    }

    .work > .heading {
      display: grid;
      grid-template-areas:
      "header location"
      "period _";
      gap: 0.5em;

      background-color: #eee;
      padding: 0.5em;

      margin-bottom: 1em;
    }

    .work > .heading > h1 {
      font-weight: bold;
    }

    .work > .heading > .location {
      font-weight: bold;
      justify-self: end;
      text-align: end;
    }

    .work > .heading > .period {
      font-weight: lighter;
    }

    .work > h1 {
      font-weight: bold;
    }

    #work > ol > li {
      margin: 2em auto;
      padding-left: 0.5em;
    }
    """
end