From 1432455be58b432b5c807fdd05f276a8f8f82474 Mon Sep 17 00:00:00 2001
From: MartinsOnuoha <martinsvictor.nd@gmail.com>
Date: Sun, 29 Oct 2023 00:04:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=8E=20style(util.ts):=20truncate=20lon?=
 =?UTF-8?q?g=20texts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppCategory/AppCategory.vue             | 1 -
 src/components/AppStatementCard/AppStatementCard.vue   | 3 ++-
 src/components/AppStatementCard/_AppStatementCard.scss | 2 +-
 src/utils/util.ts                                      | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/AppCategory/AppCategory.vue b/src/components/AppCategory/AppCategory.vue
index bfc91a0..a4035aa 100644
--- a/src/components/AppCategory/AppCategory.vue
+++ b/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'
diff --git a/src/components/AppStatementCard/AppStatementCard.vue b/src/components/AppStatementCard/AppStatementCard.vue
index 32a2bbd..a0e4ab3 100644
--- a/src/components/AppStatementCard/AppStatementCard.vue
+++ b/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" />
diff --git a/src/components/AppStatementCard/_AppStatementCard.scss b/src/components/AppStatementCard/_AppStatementCard.scss
index 695dabc..604ee83 100644
--- a/src/components/AppStatementCard/_AppStatementCard.scss
+++ b/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 {
diff --git a/src/utils/util.ts b/src/utils/util.ts
index c684c6b..c491062 100644
--- a/src/utils/util.ts
+++ b/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
+}