feat: update file name text

Author: luannguyenQV

apps/web/@/molecules/home/filter/index.tsx

@@ -6,7 +6,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { cn } from "ui"
 
 import { FilterValues, PeriodValues } from "@/types/filter"
-import { capitalizeFirstLetter } from "@/utils/capitalize"
+import { capitalizeFirstLetter } from "@/utils/text"
 
 import { FilterItem } from "./filter-item"
 

apps/web/@/molecules/upload/index.tsx

@@ -14,6 +14,8 @@ import {
   Typography,
 } from "ui"
 
+import { truncateFileName } from "@/utils/text"
+
 import AssetManagement from "./AssetsManagement"
 import FileManagerContainer, { useFileManager } from "./FileManagerContainer"
 import UploadImageButton from "./UploadImageButton"
@@ -57,9 +59,9 @@ const SelectedFiles: React.FC = () => {
       <div className="flex h-full flex-1 items-center justify-start">
         <Typography
           variant="span"
-          className="max-w-[100px] truncate text-sm font-semibold"
+          className="text-sm font-semibold"
         >
-          {selectedFiles[0].name}
+          {truncateFileName(selectedFiles[0].name)}
         </Typography>
         <Typography
           variant="span"

apps/web/@/utils/capitalize.ts

@@ -0,0 +1,11 @@
+const MAX_FILE_NAME_LENGTH = 20
+
+export const capitalizeFirstLetter = (value: string) => {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+export const truncateFileName = (name: string, maxLength = MAX_FILE_NAME_LENGTH) => {
+  if (name.length <= maxLength) return name
+  const half = Math.floor((maxLength - 3) / 2)
+  return `${name.slice(0, half)}...${name.slice(-half)}`
+}