feat: add sonner toast component

package.json

@@ -46,6 +46,7 @@
     "angular-svg-icon": "^13.0.0",
     "apexcharts": "^3.35.3",
     "ng-apexcharts": "^1.7.1",
+    "ngx-sonner": "^2.0.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
@@ -77,4 +78,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/app/app.component.html

@@ -1,4 +1,5 @@
 <div>
   <router-outlet></router-outlet>
   <app-responsive-helper></app-responsive-helper>
+  <ngx-sonner-toaster [theme]="themeService.isDark ? 'dark' : 'light'"/>
 </div>

src/app/app.component.ts

@@ -3,12 +3,13 @@ import { ThemeService } from './core/services/theme.service';
 import { RouterOutlet } from '@angular/router';
 import { NgClass } from '@angular/common';
 import { ResponsiveHelperComponent } from './shared/components/responsive-helper/responsive-helper.component';
+import { NgxSonnerToaster } from 'ngx-sonner';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [NgClass, RouterOutlet, ResponsiveHelperComponent],
+  imports: [NgClass, RouterOutlet, ResponsiveHelperComponent, NgxSonnerToaster],
 })
 export class AppComponent {
   title = 'Angular Tailwind';

src/app/modules/uikit/pages/table/table.component.html

@@ -28,6 +28,10 @@ <h3 class="font-semibold text-foreground">Team Members</h3>
       <tbody>
         @for (user of users(); track $index) {
         <tr class="hover:bg-card/50" app-table-row [user]="user"></tr>
+        } @empty {
+        <tr>
+          <td class="py-4 text-center text-sm" colspan="7">No users found</td>
+        </tr>
         }
       </tbody>
     </table>

src/app/modules/uikit/pages/table/table.component.ts

@@ -7,6 +7,7 @@ import { TableHeaderComponent } from './components/table-header/table-header.com
 import { TableFooterComponent } from './components/table-footer/table-footer.component';
 import { TableRowComponent } from './components/table-row/table-row.component';
 import { TableActionComponent } from './components/table-action/table-action.component';
+import { toast } from 'ngx-sonner';
 
 @Component({
   selector: 'app-table',
@@ -26,8 +27,9 @@ export class TableComponent implements OnInit {
   users = signal<User[]>([]);
 
   constructor(private http: HttpClient) {
-    this.http.get<User[]>('https://freetestapi.com/api/v1/users?limit=8').subscribe((data) => {
-      this.users.set(data);
+    this.http.get<User[]>('https://freetestapi.com/api/v1/users?limit=8').subscribe({
+      next: (data) => this.users.set(data),
+      error: (error) => this.handleRequestError(error),
     });
   }
 
@@ -39,5 +41,18 @@ export class TableComponent implements OnInit {
     });
   }
 
+  private handleRequestError(error: any) {
+    const msg = 'An error occurred while fetching users';
+    toast.error(msg, {
+      position: 'bottom-right',
+      description: error.message,
+      action: {
+        label: 'Undo',
+        onClick: () => console.log('Action!'),
+      },
+      actionButtonStyle: 'background-color:#DC2626; color:white;',
+    });
+  }
+
   ngOnInit() {}
 }