💎 style(util.ts): truncate long texts

src/components/AppCategory/AppCategory.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useDark } from '@vueuse/core'
 import type { PropType } from 'vue'
 import type { Category } from '@/stores/db'
 import { randomChoice } from '@/utils/util'

src/components/AppStatementCard/AppStatementCard.vue

@@ -3,6 +3,7 @@ import type { PropType } from 'vue'
 import type { Statement } from '@/stores/db'
 import { useDBStore } from '@/stores/db'
 import AppCategory from '@/components/AppCategory/AppCategory.vue'
+import { truncate } from '../../utils/util'
 
 const props = defineProps({
   statement: { type: Object as PropType<Statement>, required: true }
@@ -17,7 +18,7 @@ const getCategories = useDBStore().categories.filter(
   <div class="AppStatementCardContainer" tabindex="0">
     <div class="AppStatementCard">
       <div class="AppStatementCard__content">
-        {{ statement.description }}
+        {{ truncate(statement.description) }}
       </div>
       <div class="AppStatementCard__categories">
         <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category" />

src/components/AppStatementCard/_AppStatementCard.scss

@@ -7,7 +7,7 @@
     @apply bg-white h-52 w-full shadow-none cursor-pointer p-5 rounded-lg  relative hover:bg-gradient-to-tr from-amber-100 via-transparent to-transparent text-[var(--color-dark-text)];
     border: 1px solid var(--color-border-gray);
     &__content {
-      @apply text-lg;
+      @apply text-lg max-h-32;
     }
 
     &__categories {

src/utils/util.ts

@@ -1,3 +1,7 @@
 export function randomChoice<T>(arr: Array<T>): T {
   return arr[Math.floor(Math.random() * arr.length)]
 }
+
+export function truncate(text: string, MAX_COUNT = 178): string {
+  return text.length > MAX_COUNT ? `${text.slice(0, MAX_COUNT)}...` : text
+}