pukaad-ui-lib 1.271.2 → 1.272.0

package/dist/runtime/components/card/card-blog.vue

@@ -1,51 +1,51 @@
 <template>
-    <div class="flex gap-[16px] cursor-pointer items-start" @click="onClick">
-        <Image v-if="displayImage" :src="displayImage" :width="227" :height="128" class="rounded-[4px]"
-            fit="cover" />
-        <div class="flex flex-col gap-[4px] w-full">
-            <div class="font-title-small-prominent line-clamp-2">
-                {{ props.item.title }}
-            </div>
-            <div v-if="props.item.author" class="flex gap-[4px] text-body-medium items-center flex-wrap">
-                <div class="flex gap-[4px] items-center">
-                    <div>{{ props.item.author.name }}</div>
-                </div>
-                <div class="text-gray flex gap-[4px] items-center">
-                    <div>•</div>
-                    <div>{{ convertDateTorelativeText(displayDate) }}</div>
-                </div>
-            </div>
-            <div class="text-body-large text-gray line-clamp-2">
-                {{ displayDescription }}
-            </div>
-            <div class="flex justify-between">
-                <div class="flex gap-[24px] text-body-large text-gray">
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="pukaad:thumbs-up-regular" :size="20" />
-                        <div>{{ convertNumber(props.item.like_count ?? 0) }}</div>
-                    </div>
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="lucide:message-circle-more" :size="20" />
-                        <div>{{ convertNumber(props.item.comment_count ?? 0) }}</div>
-                    </div>
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="uil:share" :size="20" />
-                        <div>{{ convertNumber(props.item.share_count ?? 0) }}</div>
-                    </div>
-                </div>
-
-                <div v-if="!props.disabledMenu" class="flex items-center gap-[8px] text-gray" @click.stop>
-                    <Icon v-if="isPinned" name="mage:pin-fill" :size="20" />
+    <div class="flex gap-[16px] cursor-pointer items-start" @click="onClick">
+        <Image v-if="displayImage" :src="displayImage" :width="227" :height="128" class="rounded-[4px]"
+            fit="cover" />
+        <div class="flex flex-col gap-[4px] w-full">
+            <div class="font-title-small-prominent line-clamp-2">
+                {{ props.item.title }}
+            </div>
+            <div v-if="props.item.author" class="flex gap-[4px] text-body-medium items-center flex-wrap">
+                <div class="flex gap-[4px] items-center">
+                    <div>{{ props.item.author.name }}</div>
+                </div>
+                <div class="text-gray flex gap-[4px] items-center">
+                    <div>•</div>
+                    <div>{{ convertDateTorelativeText(displayDate) }}</div>
+                </div>
+            </div>
+            <div class="text-body-large text-gray line-clamp-2">
+                {{ displayDescription }}
+            </div>
+            <div class="flex justify-between">
+                <div class="flex gap-[24px] text-body-large text-gray">
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="pukaad:thumbs-up-regular" :size="20" />
+                        <div>{{ convertNumber(props.item.like_count ?? 0) }}</div>
+                    </div>
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="lucide:message-circle-more" :size="20" />
+                        <div>{{ convertNumber(props.item.comment_count ?? 0) }}</div>
+                    </div>
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="uil:share" :size="20" />
+                        <div>{{ convertNumber(props.item.share_count ?? 0) }}</div>
+                    </div>
+                </div>
+
+                <div v-if="!props.disabledMenu" class="flex items-center gap-[8px] text-gray" @click.stop>
+                    <Icon v-if="isPinned" name="mage:pin-fill" :size="20" />
                     <PickerOptionMenuUser v-if="props.item.author" :state="
   props.isMyProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
-" disabled-padding @blog-unpin="$emit('blog-unpinned', props.item.id)"
-                        @blog-pin="$emit('blog-pinned', props.item.id)" @blog-edit="$emit('blog-edit')"
-                        @blog-delete="$emit('blog-deleted', props.item.id)" />
-                </div>
-
-            </div>
-        </div>
-    </div>
+" disabled-padding @blog-unpin="$emit('blog-unpinned', props.item.id)"
+                        @blog-pin="$emit('blog-pinned', props.item.id)" @blog-edit="$emit('blog-edit')"
+                        @blog-delete="$emit('blog-deleted', props.item.id)" />
+                </div>
+
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-place-detail.vue

@@ -1,55 +1,55 @@
 <template>
-  <Card variant="outline">
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[12px]">
-        <Icon name="lucide:circle-alert" :size="20" class="text-primary shrink-0 mt-[2px]" />
-        <div v-if="props.item.description">{{ props.item.description }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon name="lucide:tag" :size="20" class="text-primary shrink-0 mt-[2px]" />
-        <div v-if="categoryText">{{ categoryText }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon name="lucide:clock" :size="20" class="text-primary shrink-0 mt-[2px]" />
-        <div v-if="businessHours.length" class="flex flex-col gap-[4px] flex-1">
-          <div class="font-body-large-prominent text-success">{{ props.item.open_status ?? "\u0E40\u0E1B\u0E34\u0E14\u0E2D\u0E22\u0E39\u0E48" }}</div>
-          <div v-for="(hour, index) in businessHours" :key="index" class="flex items-center justify-between">
-            <span>{{ hour.day }}</span>
-            <span>{{ hour.time_range }}</span>
-          </div>
-        </div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon name="lucide:phone" :size="20" class="text-primary shrink-0 mt-[2px]" />
-        <div v-if="props.item.phone">{{ props.item.phone }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
-      </div>
-
-      <Divider />
-
-      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
-        <div
-          v-for="(linkItem, index) in socialLinks"
-          :key="index"
-          class="flex gap-[12px] items-center cursor-pointer hover:underline"
-          @click="onClickLink(linkItem.link)"
-        >
-          <Icon :name="`pukaad-social:${linkItem.name}`" :size="20" class="shrink-0" />
-          <span>{{ linkItem.link }}</span>
-        </div>
-      </div>
-      <div v-else class="flex gap-[12px] items-center">
-        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
-      </div>
-    </div>
-  </Card>
+  <Card variant="outline">
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:circle-alert" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.description">{{ props.item.description }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:tag" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="categoryText">{{ categoryText }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:clock" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="businessHours.length" class="flex flex-col gap-[4px] flex-1">
+          <div class="font-body-large-prominent text-success">{{ props.item.open_status ?? "\u0E40\u0E1B\u0E34\u0E14\u0E2D\u0E22\u0E39\u0E48" }}</div>
+          <div v-for="(hour, index) in businessHours" :key="index" class="flex items-center justify-between">
+            <span>{{ hour.day }}</span>
+            <span>{{ hour.time_range }}</span>
+          </div>
+        </div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon name="lucide:phone" :size="20" class="text-primary shrink-0 mt-[2px]" />
+        <div v-if="props.item.phone">{{ props.item.phone }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
+      </div>
+
+      <Divider />
+
+      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
+        <div
+          v-for="(linkItem, index) in socialLinks"
+          :key="index"
+          class="flex gap-[12px] items-center cursor-pointer hover:underline"
+          @click="onClickLink(linkItem.link)"
+        >
+          <Icon :name="`pukaad-social:${linkItem.name}`" :size="20" class="shrink-0" />
+          <span>{{ linkItem.link }}</span>
+        </div>
+      </div>
+      <div v-else class="flex gap-[12px] items-center">
+        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-place.vue

@@ -1,32 +1,32 @@
 <template>
-  <div class="flex gap-[16px] items-center">
-    <Image v-if="props.item?.image_cover" :src="props.item.image_cover" width="227" height="128"
-      class="rounded-[4px] flex-shrink-0 object-cover" />
-    <div v-else class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center">
-      <Icon name="pukaad:map-location-dot" :size="36" class="text-gray" />
-    </div>
-    <div class="flex flex-col gap-[4px]">
-      <div v-if="props.item?.business_name" class="font-title-small-promient">
-        {{ props.item.business_name }}
-      </div>
-
-      <div class="flex items-center gap-[4px] font-body-medium text-gray">
-        <InputRating :size="10" readonly :model-value="props.item.rating || 0" />
-        <span v-if="props.item.review_count !== void 0" class="ml-[4px]">{{
-          convertNumber(props.item.review_count) }}</span>
-        <span v-if="props.item.review_count !== void 0 && props.item.like_count !== void 0">•</span>
-        <span v-if="props.item.like_count !== void 0">ถูกใจ {{ convertNumber(props.item.like_count)
-        }}</span>
-      </div>
-
-      <div v-if="props.item.address?.full_address" class="font-body-medium text-gray">
-        {{ props.item.address.full_address }}
-      </div>
-      <div v-if="props.item.description" class="font-body-medium text-gray line-clamp-2">
-        {{ props.item.description }}
-      </div>
-    </div>
-  </div>
+  <div class="flex gap-[16px] items-center">
+    <Image v-if="props.item?.image_cover" :src="props.item.image_cover" width="227" height="128"
+      class="rounded-[4px] flex-shrink-0 object-cover" />
+    <div v-else class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center">
+      <Icon name="pukaad:map-location-dot" :size="36" class="text-gray" />
+    </div>
+    <div class="flex flex-col gap-[4px]">
+      <div v-if="props.item?.business_name" class="font-title-small-promient">
+        {{ props.item.business_name }}
+      </div>
+
+      <div class="flex items-center gap-[4px] font-body-medium text-gray">
+        <InputRating :size="10" readonly :model-value="props.item.rating || 0" />
+        <span v-if="props.item.review_count !== void 0" class="ml-[4px]">{{
+          convertNumber(props.item.review_count) }}</span>
+        <span v-if="props.item.review_count !== void 0 && props.item.like_count !== void 0">•</span>
+        <span v-if="props.item.like_count !== void 0">ถูกใจ {{ convertNumber(props.item.like_count)
+        }}</span>
+      </div>
+
+      <div v-if="props.item.address?.full_address" class="font-body-medium text-gray">
+        {{ props.item.address.full_address }}
+      </div>
+      <div v-if="props.item.description" class="font-body-medium text-gray line-clamp-2">
+        {{ props.item.description }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-profile-about.vue

@@ -1,85 +1,85 @@
 <template>
-  <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]" variant="outline">
-    <template v-if="props.isMyProfile && !isEmpty" #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
-        <Button variant="text" color="primary" @click="isShowEdit = true">
-          <Icon name="lucide:square-pen" :size="20" class="text-primary" />
-          แก้ไข
-        </Button>
-      </div>
-    </template>
-    <div
-      v-if="props.isMyProfile && isEmpty"
-      class="flex flex-col gap-[8px] font-body-large"
-    >
-      <Button class="w-full" @click="isShowEdit = true">
-        <Icon name="lucide:plus" :size="20" />
-        เพิ่มข้อมูลทั่วไป
-      </Button>
-    </div>
-    <div v-else class="flex flex-col gap-[8px] font-body-large">
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:circle-alert" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.description ? 'text-cloud' : ''">
-          {{ item.description || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22" }}
-        </div>
-      </div>
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:book-user" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.category?.name ? 'text-cloud' : ''">
-          {{ item.category?.name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }}
-        </div>
-      </div>
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:map-pin" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.address ? 'text-cloud' : ''">
-          {{ item.address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
-        </div>
-      </div>
-
-      <div class="flex gap-[8px]">
-        <div class="pt-[3px]">
-          <Icon name="lucide:phone" :size="20" class="text-primary" />
-        </div>
-        <div :class="!item.contact_phone ? 'text-cloud' : ''">
-          {{ item.contact_phone || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C" }}
-        </div>
-      </div>
-      <div
-        v-for="(linkItem, i) in item.contact_channels"
-        :key="i"
-        class="flex gap-[8px]"
-        v-if="item.contact_channels.length > 0"
-      >
-        <div class="pt-[3px]">
-          <Icon
-            :name="`pukaad-social:${linkItem.channel_type}`"
-            :size="20"
-            class="text-primary"
-          />
-        </div>
-        <a
-          :href="linkItem.value"
-          target="_blank"
-          class="cursor-pointer hover:underline"
-        >
-          {{ linkItem.value }}
-        </a>
-      </div>
-    </div>
-  </Card>
-  <DrawerProfileAbout
-    :item="item"
-    v-model="isShowEdit"
-    @submit="onUpdateAbout"
-  />
+  <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]" variant="outline">
+    <template v-if="props.isMyProfile && !isEmpty" #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
+        <Button variant="text" color="primary" @click="isShowEdit = true">
+          <Icon name="lucide:square-pen" :size="20" class="text-primary" />
+          แก้ไข
+        </Button>
+      </div>
+    </template>
+    <div
+      v-if="props.isMyProfile && isEmpty"
+      class="flex flex-col gap-[8px] font-body-large"
+    >
+      <Button class="w-full" @click="isShowEdit = true">
+        <Icon name="lucide:plus" :size="20" />
+        เพิ่มข้อมูลทั่วไป
+      </Button>
+    </div>
+    <div v-else class="flex flex-col gap-[8px] font-body-large">
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:circle-alert" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.description ? 'text-cloud' : ''">
+          {{ item.description || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:book-user" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.category?.name ? 'text-cloud' : ''">
+          {{ item.category?.name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:map-pin" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.address ? 'text-cloud' : ''">
+          {{ item.address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
+        </div>
+      </div>
+
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:phone" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.contact_phone ? 'text-cloud' : ''">
+          {{ item.contact_phone || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C" }}
+        </div>
+      </div>
+      <div
+        v-for="(linkItem, i) in item.contact_channels"
+        :key="i"
+        class="flex gap-[8px]"
+        v-if="item.contact_channels.length > 0"
+      >
+        <div class="pt-[3px]">
+          <Icon
+            :name="`pukaad-social:${linkItem.channel_type}`"
+            :size="20"
+            class="text-primary"
+          />
+        </div>
+        <a
+          :href="linkItem.value"
+          target="_blank"
+          class="cursor-pointer hover:underline"
+        >
+          {{ linkItem.value }}
+        </a>
+      </div>
+    </div>
+  </Card>
+  <DrawerProfileAbout
+    :item="item"
+    v-model="isShowEdit"
+    @submit="onUpdateAbout"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-profile-header.vue

@@ -1,98 +1,98 @@
 <template>
-  <!-- <div
-    :class="[
-      'flex gap-[16px] items-center justify-between',
-      !props.disabledPadding && 'py-[16px]',
-    ]"
-  >
-    <Avatar
-      :src="props.item.profile_image.url"
-      size="40"
-      class="cursor-pointer"
-      @click="onProfileClick"
-    />
-    <div class="flex-1 flex flex-col gap-[4px]">
-      <div class="flex gap-[4px] font-body-large-prominent items-center">
-        <div class="cursor-pointer" @click="onProfileClick">
-          {{ props.item.profile_name }}
-        </div>
-        <Icon
-          v-if="props.item.profile_verified"
-          name="pukaad-verify"
-          size="16"
-        />
-        <div v-if="!props.actionsHidden">•</div>
-
-        <Button
-          type="text"
-          variant="primary"
-          @click="!props.preview ? toggleFollow() : null"
-          v-if="!props.actionsHidden"
-          :disabled="props.preview"
-          disabled-padding
-        >
-          {{ isFollowing ? "เลิกติดตาม" : "ติดตาม" }}
-        </Button>
-      </div>
-
-      <div v-if="props.type !== 'media'">
-        <div
-          v-if="type === 'article'"
-          class="text-gray font-body-large flex gap-[4px]"
-        >
-          {{ props.item.time }} • {{ props.item.view }}
-        </div>
-        <div v-else class="flex gap-[16px] font-body-large">
-          <div class="text-gray flex gap-[4px]">
-            ผู้ติดตาม
-            <div class="text-black">{{ props.item.profile_follower }}</div>
-          </div>
-          <div class="text-gray flex gap-[4px]">
-            กำลังเผยแพร่
-            <div class="text-black">{{ props.item.profile_following }}</div>
-          </div>
-          <div class="text-gray flex gap-[4px]">
-            อัตราตอบแชท
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
-            สั่งซื้อสำเร็จ
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
-            ผู้ขายยกเลิก
-            <div class="text-black">{{ props.item.profile_response_rate }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="!actionsHidden && type !== 'media'" class="flex gap-[16px]">
-      <Button
-        prepend-icon="lucide:message-circle"
-        full-rounded
-        :icon-size="20"
-        @click="onChat"
-        :disabled="props.preview"
-      >
-        แชท
-      </Button>
-      <PickerOptionMenuUser
-        :variant="optionMenuButtonType"
-        circle
-        :state="profileType"
-        :disabled="props.preview"
-      />
-    </div>
-
-    <PickerOptionMenuUser
-      v-else-if="!actionsHidden"
-      :variant="optionMenuButtonType"
-      circle
-      :state="profileType"
-      :disabled="props.preview"
-    />
-  </div> -->
+  <!-- <div
+    :class="[
+      'flex gap-[16px] items-center justify-between',
+      !props.disabledPadding && 'py-[16px]',
+    ]"
+  >
+    <Avatar
+      :src="props.item.profile_image.url"
+      size="40"
+      class="cursor-pointer"
+      @click="onProfileClick"
+    />
+    <div class="flex-1 flex flex-col gap-[4px]">
+      <div class="flex gap-[4px] font-body-large-prominent items-center">
+        <div class="cursor-pointer" @click="onProfileClick">
+          {{ props.item.profile_name }}
+        </div>
+        <Icon
+          v-if="props.item.profile_verified"
+          name="pukaad-verify"
+          size="16"
+        />
+        <div v-if="!props.actionsHidden">•</div>
+
+        <Button
+          type="text"
+          variant="primary"
+          @click="!props.preview ? toggleFollow() : null"
+          v-if="!props.actionsHidden"
+          :disabled="props.preview"
+          disabled-padding
+        >
+          {{ isFollowing ? "เลิกติดตาม" : "ติดตาม" }}
+        </Button>
+      </div>
+
+      <div v-if="props.type !== 'media'">
+        <div
+          v-if="type === 'article'"
+          class="text-gray font-body-large flex gap-[4px]"
+        >
+          {{ props.item.time }} • {{ props.item.view }}
+        </div>
+        <div v-else class="flex gap-[16px] font-body-large">
+          <div class="text-gray flex gap-[4px]">
+            ผู้ติดตาม
+            <div class="text-black">{{ props.item.profile_follower }}</div>
+          </div>
+          <div class="text-gray flex gap-[4px]">
+            กำลังเผยแพร่
+            <div class="text-black">{{ props.item.profile_following }}</div>
+          </div>
+          <div class="text-gray flex gap-[4px]">
+            อัตราตอบแชท
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
+            สั่งซื้อสำเร็จ
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+          <div v-if="type === 'sale-info'" class="text-gray flex gap-[4px]">
+            ผู้ขายยกเลิก
+            <div class="text-black">{{ props.item.profile_response_rate }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!actionsHidden && type !== 'media'" class="flex gap-[16px]">
+      <Button
+        prepend-icon="lucide:message-circle"
+        full-rounded
+        :icon-size="20"
+        @click="onChat"
+        :disabled="props.preview"
+      >
+        แชท
+      </Button>
+      <PickerOptionMenuUser
+        :variant="optionMenuButtonType"
+        circle
+        :state="profileType"
+        :disabled="props.preview"
+      />
+    </div>
+
+    <PickerOptionMenuUser
+      v-else-if="!actionsHidden"
+      :variant="optionMenuButtonType"
+      circle
+      :state="profileType"
+      :disabled="props.preview"
+    />
+  </div> -->
 </template>
 
 <script setup>