chore: solved review comments

dalenguyen · Jun 14, 2024 · 2308cfc · 2308cfc
1 parent 4efe6fa
commit 2308cfc
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 33 deletions.
diff --git a/pdf/src/app/pages/(home).page.ts b/pdf/src/app/pages/(home).page.ts
@@ -13,7 +13,7 @@ import { ToastModule } from 'primeng/toast'
 import { DisclaimerComponent } from '../shared/components/disclaimer/disclaimer.component'
 import { PdfHandlerBase } from '../shared/components/pdf-handler-base/pdf-handler-base.directive'
 import { ShoutOutComponent } from '../shared/components/shout-out/shout-out.component'
-import { ByteToKbPipe } from '../shared/pipes/bytes-to-kb.pipe'
+import { ByteSizeFormatter } from '../shared/pipes'
 import { getNextDays } from '../shared/utils'
 
 export const routeMeta: RouteMeta = {
@@ -57,7 +57,9 @@ export const routeMeta: RouteMeta = {
       <p class="mb-4">
         Congratulations! Your file is reduced by
         <strong
-          >{{ this.currentFileSize() - this.newFileSize() | byteToKb }}!</strong
+          >{{
+            this.currentFileSize() - this.newFileSize() | byteSizeFormatter
+          }}!</strong
         >
       </p>
       }
@@ -85,7 +87,7 @@ export const routeMeta: RouteMeta = {
     BuyMeACoffeeComponent,
     ShoutOutComponent,
     DisclaimerComponent,
-    ByteToKbPipe,
+    ByteSizeFormatter,
   ],
 })
 export default class HomeComponent extends PdfHandlerBase {

diff --git a/pdf/src/app/shared/components/header/header.component.ts b/pdf/src/app/shared/components/header/header.component.ts
@@ -19,19 +19,6 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
     RouterLinkWithHref,
     RouterLinkActive,
   ],
-  styles: `
-  .link {
-    color: #9ca3af;
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-  .link:hover {
-    color: white;
-  }
-  .active-link {
-    color: #e5e7eb;
-  }
-  `,
   template: `
     <!-- REPLACE With PrimeNG Menubar -->
     <header class="bg-gray-800 py-4 px-6">
@@ -54,15 +41,15 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
               <a
                 routerLink="/"
                 [routerLinkActiveOptions]="{ exact: true }"
-                routerLinkActive="active-link"
+                routerLinkActive="active"
                 class="link"
               >
                 Resize PDF
               </a>
 
               <a
                 routerLink="/pdf-to-images"
-                routerLinkActive="active-link"
+                routerLinkActive="active"
                 class="link"
               >
                 PDF to Images

diff --git a/pdf/src/app/shared/pipes/byte-size-formatter.pipe.ts b/pdf/src/app/shared/pipes/byte-size-formatter.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'byteSizeFormatter',
+  standalone: true,
+})
+export class ByteSizeFormatter implements PipeTransform {
+  transform(bytes: number, precision = 1): string {
+    if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes))
+      return 'Invalid number'
+
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+    let unitIndex = 0
+
+    while (bytes >= 1024 && unitIndex < units.length - 1) {
+      bytes /= 1024
+      unitIndex++
+    }
+
+    return `${bytes.toFixed(precision)} ${units[unitIndex]}`
+  }
+}
diff --git a/pdf/src/app/shared/pipes/bytes-to-kb.pipe.ts b/pdf/src/app/shared/pipes/bytes-to-kb.pipe.ts
diff --git a/pdf/src/app/shared/pipes/index.ts b/pdf/src/app/shared/pipes/index.ts
@@ -0,0 +1 @@
+export * from './byte-size-formatter.pipe'
diff --git a/pdf/src/styles.scss b/pdf/src/styles.scss
@@ -1,4 +1,4 @@
-@layer tailwind-base, tailwind-utilities, primeng;
+@layer tailwind-base, tailwind-utilities, tailwind-component, primeng;
 
 @layer tailwind-base {
   @tailwind base;
@@ -8,6 +8,19 @@
   @tailwind utilities;
 }
 
+@layer tailwind-components {
+  @tailwind components;
+}
+
+@layer tailwind-components {
+  .link {
+    @apply text-gray-400 no-underline hover:text-white transition-colors duration-300;
+  }
+  .active {
+    @apply text-gray-200;
+  }
+}
+
 @import 'primeng/resources/themes/tailwind-light/theme.css';
 @import 'primeng/resources/primeng.css';
 @import 'primeicons/primeicons.css';