Koyaka

Media / Comments

Basic Media / Comments

John Doe 2h ago
This is a top-level comment.
Jane Smith 1h ago
This is a reply to the top-level comment.
Emily Johnson 30m ago
Thanks for the clarification!
Michael Lee 3h ago
Another top-level comment here.

    <div id="comments" class="media" style="--media-nested-space: 0.7rem">
        <!-- Top-level comment -->
        <div class="media-item">
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=58" alt="" />
            </div>
            <div class="media-body">
                <div class="media-header">
                    <strong>John Doe</strong>
                    <small class="text-base-alt">2h ago</small>
                </div>
                <div class="media-content">This is a top-level comment.</div>
                <div class="media-actions">
                    <button
                        class="button ghost xs"
                        onclick="openNestedMedia(this)"
                    >
                        <div class="icon">
                            <i class="fa-solid fa-caret-down"></i>
                        </div>
                    </button>
                    <button class="badge ghost primary">Reply</button>
                    <button class="badge ghost primary">Like</button>
                </div>

                <!-- Nested comment -->
                <div class="media">
                    <div class="media-item">
                        <div class="avatar">
                            <img
                                src="https://i.pravatar.cc/400?img=12"
                                alt=""
                            />
                        </div>
                        <div class="media-body">
                            <div class="media-header">
                                <strong>Jane Smith</strong>
                                <small class="text-base-alt">1h ago</small>
                            </div>
                            <div class="media-content">
                                This is a reply to the top-level comment.
                            </div>
                            <div class="media-actions">
                                <button
                                    class="button ghost xs"
                                    onclick="openNestedMedia(this)"
                                >
                                    <div class="icon">
                                        <i class="fa-solid fa-caret-down"></i>
                                    </div>
                                </button>
                                <button class="badge ghost primary">
                                    Reply
                                </button>
                                <button class="badge ghost primary">
                                    Like
                                </button>
                            </div>

                            <!-- Nested reply -->
                            <div class="media">
                                <div class="media-item">
                                    <div class="avatar">
                                        <img
                                            src="https://i.pravatar.cc/400?img=25"
                                            alt=""
                                        />
                                    </div>
                                    <div class="media-body">
                                        <div class="media-header">
                                            <strong>Emily Johnson</strong>
                                            <small class="text-base-alt"
                                                >30m ago</small
                                            >
                                        </div>
                                        <div class="media-content">
                                            Thanks for the clarification!
                                        </div>
                                        <div class="media-actions">
                                            <button
                                                class="button ghost xs"
                                                onclick="openNestedMedia(this)"
                                            >
                                                <div class="icon">
                                                    <i
                                                        class="fa-solid fa-caret-down"
                                                    ></i>
                                                </div>
                                            </button>
                                            <button class="badge ghost primary">
                                                Reply
                                            </button>
                                            <button class="badge ghost primary">
                                                Like
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End nested reply -->
                        </div>
                    </div>
                </div>
                <!-- End nested comment -->
            </div>
        </div>

        <!-- Another top-level comment -->
        <div class="media-item">
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=37" alt="" />
            </div>
            <div class="media-body">
                <div class="media-header">
                    <strong>Michael Lee</strong>
                    <small class="text-base-alt">3h ago</small>
                </div>
                <div class="media-content">Another top-level comment here.</div>
                <div class="media-actions">
                    <button
                        class="button ghost xs"
                        onclick="openNestedMedia(this)"
                    >
                        <div class="icon">
                            <i class="fa-solid fa-caret-down"></i>
                        </div>
                    </button>
                    <button class="badge ghost primary">Reply</button>
                    <button class="badge ghost primary">Like</button>
                </div>
            </div>
        </div>
    </div>