Packages

phoenix_kit_comments

0.1.0
0.2.14 0.2.13 0.2.12 0.2.11 0.2.10 0.2.9 0.2.8 0.2.7 0.2.6 0.2.5 0.2.1 0.2.0 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Comments module for PhoenixKit — polymorphic threading, likes/dislikes, and moderation

HexDocs

Current section

Files

Jump to
Readme
18 Versions
2 Dependencies
Dependants
Files
Activity
phoenix_kit_comments lib phoenix_kit_comments web comments_component.html.heex
Raw

lib/phoenix_kit_comments/web/comments_component.html.heex 

<div>

  <%= if @enabled do %>

    <div class="card bg-base-100 shadow-xl">

      <div class="card-body">

        <h2 class="card-title text-2xl mb-4">

          <.icon name="hero-chat-bubble-left-right" class="w-6 h-6" />

          {@title} ({@comment_count})

        </h2>



        <%!-- New Comment Form --%>

        <div class="mb-6">

          <%= if @reply_to do %>

            <div class="alert alert-info mb-2">

              <div class="flex-1">

                <span>Replying to comment</span>

              </div>

              <button phx-click="cancel_reply" phx-target={@myself} class="btn btn-ghost btn-sm">

                Cancel

              </button>

            </div>

          <% end %>



          <.form for={%{}} phx-submit="add_comment" phx-target={@myself} class="space-y-2">

            <textarea

              name="comment"

              placeholder="Write a comment..."

              class="textarea textarea-bordered w-full"

              rows="3"

              required

            ><%= @new_comment %></textarea>



            <div class="flex justify-end">

              <button type="submit" class="btn btn-primary btn-sm">

                <.icon name="hero-paper-airplane" class="w-4 h-4 mr-2" /> Post Comment

              </button>

            </div>

          </.form>

        </div>



        <%!-- Comments List --%>

        <%= if length(@comments) > 0 do %>

          <div class="space-y-4">

            <%= for comment <- @comments do %>

              <.render_comment

                comment={comment}

                current_user={@current_user}

                myself={@myself}

              />

            <% end %>

          </div>

        <% else %>

          <div class="text-center py-8 text-base-content/60">

            <.icon name="hero-chat-bubble-left" class="w-12 h-12 mx-auto mb-2 opacity-50" />

            <p>No comments yet. Be the first to comment!</p>

          </div>

        <% end %>

      </div>

    </div>

  <% end %>

</div>