feat: challenges page

[ruioliveira02]

No description provided.

[joaodiaslobo]

Challenge shouldn't be in the Minigames context, maybe create a challenge context for it? Make sure to also put ChallengePrize stuff inside it.

[joaodiaslobo]

Not working on mobile

[joaodiaslobo]

Only one thing remaining for this to be merged.
Instead of making the display position be an input, try to use the sortable hook so that the challenges are sorted via dragging on the table.
Something like what is being done with the company tiers here:

I recommend the following:
First, add the possibility of the table component having the Sorting hook by adding the following to the file:
A new attribute to define a sortable table:

  attr :sortable, :boolean, default: false

And if it is true, add the hook (to the table body element):

          <tbody
            id={@id <> "-tbody"}
            phx-update={match?(%Phoenix.LiveView.LiveStream{}, @items) && "stream"}
            phx-hook={if @sortable do "Sorting" end}
          >

Then, after adding this, create a new column for the draggable bars on the challenges table, and add the sortable attribute to it:

    <.table
      id="challenges-table"
      items={@streams.challenges}
      meta={@meta}
      params={@params}
      row_click={&JS.navigate(~p"/dashboard/minigames/challenges/#{elem(&1, 1).id}/edit")}
      sortable
    >
      <:col :let={{_id, _challenge}} label="">
        <.icon name="hero-bars-3" class="w-5 h-5 handle cursor-pointer ml-4" />
      </:col>
      ...

After doing all this, you can handle the order changing event on the challenge index live view.