chore: Replace thumbnail component with avatar

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -13,7 +13,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({
   id: {
@@ -101,7 +101,7 @@ const categoryName = computed(() => {
 });
 
 const authorName = computed(() => {
-  return props.author?.name || props.author?.availableName || '-';
+  return props.author?.name || props.author?.availableName || '';
 });
 
 const authorThumbnailSrc = computed(() => {
@@ -164,13 +164,14 @@ const handleClick = id => {
       <div class="flex items-center justify-between w-full gap-4">
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-1">
-            <Thumbnail
-              :author="author"
+            <Avatar
               :name="authorName"
               :src="authorThumbnailSrc"
+              :size="16"
+              rounded-full
             />
             <span class="text-sm truncate text-n-slate-11">
-              {{ authorName }}
+              {{ authorName || '-' }}
             </span>
           </div>
           <span class="block text-sm whitespace-nowrap text-n-slate-11">