···

       
29
       
29
       
 
       


     

       
30
       
30
       
 
       
<template>

     

       
31
       
31
       
 
       
    <div class="md:w-[80%] mx-auto mt-16">

     

       
32
       
32
       
-
       
        <div class="flex items-baseline gap-4">

     

       
32
       
32
       
+
       
        <div class="flex items-baseline flex-col md:flex-row md:gap-4 mb-2 md:mb-0">

     

       
33
       
33
       
 
       
            <h3 class="font-bold text-xl">Join the conversation!</h3>

     

       
34
       
34
       
-
       
            <p class="text-gray-500 text-sm" title="Replies">

     

       
35
       
35
       
-
       
                <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />

     

       
36
       
36
       
-
       
                {{post.post.replyCount}}

     

       
37
       
37
       
-
       
            </p>

     

       
38
       
38
       
-
       
            <p class="text-gray-500 text-sm" title="Likes">

     

       
39
       
39
       
-
       
                <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />

     

       
40
       
40
       
-
       
                <span>

     

       
41
       
41
       
-
       
                    {{post.post.likeCount}}

     

       
42
       
42
       
-
       
                </span>

     

       
43
       
43
       
-
       
            </p>

     

       
44
       
44
       
-
       
            <p class="text-gray-500 text-sm" title="Bookmarks">

     

       
45
       
45
       
-
       
                <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       
46
       
46
       
-
       
                {{post.post.bookmarkCount}}

     

       
47
       
47
       
-
       
            </p>

     

       
34
       
34
       
+
       
            <div class="flex items-center gap-2">

     

       
35
       
35
       
+
       
                <p class="text-gray-500 text-sm" title="Replies">

     

       
36
       
36
       
+
       
                    <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />

     

       
37
       
37
       
+
       
                    {{post.post.replyCount}}

     

       
38
       
38
       
+
       
                </p>

     

       
39
       
39
       
+
       
                <p class="text-gray-500 text-sm" title="Likes">

     

       
40
       
40
       
+
       
                    <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />

     

       
41
       
41
       
+
       
                    <span>

     

       
42
       
42
       
+
       
                        {{post.post.likeCount}}

     

       
43
       
43
       
+
       
                    </span>

     

       
44
       
44
       
+
       
                </p>

     

       
45
       
45
       
+
       
                <p class="text-gray-500 text-sm" title="Bookmarks">

     

       
46
       
46
       
+
       
                    <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       
47
       
47
       
+
       
                    {{post.post.bookmarkCount}}

     

       
48
       
48
       
+
       
                </p>

     

       
49
       
49
       
+
       
            </div>

     

       
48
       
50
       
 
       
        </div>

     

       
49
       
51
       
 
       


     

       
50
       
52
       
 
       
        <p class="text-gray-600 text-md mb-6">

     

···

       
95
       
95
       
 
       
                <BskyComments v-if="post.bskyCid" :cid="post.bskyCid" />

     

       
96
       
96
       
 
       


     

       
97
       
97
       
 
       
                <template #fallback>

     

       
98
       
98
       
-
       
                    <h1 class="text-xl font-bold text-stone-600">Loading comments...</h1>

     

       
98
       
98
       
+
       
                    <h1 class="md:w-[80%] mx-auto mt-16 text-xl font-bold text-stone-600">Loading comments...</h1>

     

       
99
       
99
       
 
       
                </template>

     

       
100
       
100
       
 
       
            </Suspense>

     

       
101
       
101