|
120 | 120 |
|
121 | 121 | <Drawer bind:drawer> |
122 | 122 | {#if showComments.value} |
123 | | - <ul class="pb-4"> |
124 | | - <h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3> |
125 | | - {#if isCommentsLoading} |
126 | | - <li class="text-center text-gray-500">Loading comments...</li> |
127 | | - {:else if commentsError} |
128 | | - <li class="text-center text-red-500">{commentsError}</li> |
129 | | - {:else} |
130 | | - {#each $comments as comment} |
131 | | - <li class="mb-4"> |
132 | | - <Comment |
133 | | - comment={{ |
134 | | - userImgSrc: |
135 | | - comment.author.avatarUrl || |
136 | | - 'https://picsum.photos/200/200', |
137 | | - name: comment.author.name || comment.author.handle, |
138 | | - commentId: comment.id, |
139 | | - comment: comment.text, |
140 | | - isUpVoted: false, |
141 | | - isDownVoted: false, |
142 | | - upVotes: 0, |
143 | | - time: new Date(comment.createdAt).toLocaleDateString(), |
144 | | - replies: [] |
145 | | - }} |
146 | | - handleReply={() => { |
147 | | - activeReplyToId = comment.id; |
148 | | - commentInput?.focus(); |
149 | | - }} |
150 | | - /> |
151 | | - </li> |
152 | | - {/each} |
153 | | - {/if} |
154 | | - <MessageInput |
155 | | - class="sticky start-0 bottom-4 mt-4 w-full px-2" |
156 | | - variant="comment" |
157 | | - src={profile?.avatarUrl || 'https://picsum.photos/200/200'} |
158 | | - bind:value={commentValue} |
159 | | - {handleSend} |
160 | | - bind:input={commentInput} |
| 123 | + <ul class="pb-4"> |
| 124 | + <h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3> |
| 125 | + {#if isCommentsLoading} |
| 126 | + <li class="text-center text-gray-500">Loading comments...</li> |
| 127 | + {:else if commentsError} |
| 128 | + <li class="text-center text-red-500">{commentsError}</li> |
| 129 | + {:else} |
| 130 | + {#each $comments as comment} |
| 131 | + <li class="mb-4"> |
| 132 | + <Comment |
| 133 | + comment={{ |
| 134 | + userImgSrc: |
| 135 | + comment.author.avatarUrl || |
| 136 | + 'https://picsum.photos/200/200', |
| 137 | + name: comment.author.name || comment.author.handle, |
| 138 | + commentId: comment.id, |
| 139 | + comment: comment.text, |
| 140 | + isUpVoted: false, |
| 141 | + isDownVoted: false, |
| 142 | + upVotes: 0, |
| 143 | + time: new Date(comment.createdAt).toLocaleDateString(), |
| 144 | + replies: [] |
| 145 | + }} |
| 146 | + handleReply={() => { |
| 147 | + activeReplyToId = comment.id; |
| 148 | + commentInput?.focus(); |
| 149 | + }} |
161 | 150 | /> |
162 | | - </ul> |
163 | | - {/if} |
| 151 | + </li> |
| 152 | + {/each} |
| 153 | + {/if} |
| 154 | + <MessageInput |
| 155 | + class="sticky start-0 bottom-4 mt-4 w-full px-2" |
| 156 | + variant="comment" |
| 157 | + src={profile?.avatarUrl || 'https://picsum.photos/200/200'} |
| 158 | + bind:value={commentValue} |
| 159 | + {handleSend} |
| 160 | + bind:input={commentInput} |
| 161 | + /> |
| 162 | + </ul> |
| 163 | + {/if} |
164 | 164 | </Drawer> |
0 commit comments