feat: add daysiui

Author: namnguyen2k1

angular.json

@@ -61,14 +61,14 @@
               "extractLicenses": true,
               "sourceMap": true,
               "namedChunks": false,
-              "aot": true
+              "aot": false
             },
             "development": {
               "optimization": false,
               "verbose": false,
               "sourceMap": true,
               "namedChunks": true,
-              "aot": true,
+              "aot": false,
               "extractLicenses": false,
               "statsJson": false
             }

package-lock.json

@@ -32,6 +32,7 @@
     "@fortawesome/angular-fontawesome": "1.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@tailwindcss/postcss": "^4.1.11",
+    "daisyui": "^5.0.50",
     "postcss": "^8.5.6",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.11",
@@ -61,4 +62,4 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "8.34.1"
   }
-}
+}

package.json

@@ -6,7 +6,7 @@ import { RouterOutlet } from "@angular/router";
   imports: [RouterOutlet],
   standalone: true,
   template: `
-    <h1 id="title">{{ title }}</h1>
+    <h1 id="title" class="gradient-text text-center">{{ title }}</h1>
     <div class="!max-w-[1200px] mx-auto">
       <router-outlet></router-outlet>
     </div>

src/app/app.component.ts

@@ -10,9 +10,11 @@ import { SessionService } from "@core/services";
   template: `
     <div class="styled-box">Login Page</div>
     <div class="m-[10px] flex gap-[10px]">
-      <button (click)="login('client')">Login</button>
-      <button (click)="router.navigateByUrl('/auth/register')">Register</button>
-      <button (click)="login('admin')">Admin Login</button>
+      <button class="app-btn-primary" (click)="login('client')">Login</button>
+      <button class="app-btn-primary" (click)="router.navigateByUrl('/auth/register')">
+        Register
+      </button>
+      <button class="app-btn-accent" (click)="login('admin')">Admin Login</button>
     </div>
   `,
 })

src/app/features/auth/pages/login.component.ts

@@ -8,7 +8,7 @@ import { Router } from "@angular/router";
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="styled-box">Register Page</div>
-    <button (click)="router.navigateByUrl('/auth/login')">login</button>
+    <button class="app-btn-primary" (click)="router.navigateByUrl('/auth/login')">login</button>
   `,
 })
 export class RegisterComponent {

src/app/features/auth/pages/register.component.ts

@@ -9,10 +9,16 @@ import { Post } from "../models";
   template: `
     @defer (on viewport) {
       @let p = data();
-      <div class="styled-box !min-h-full">
-        <h3 class="underline">[Post {{ p.id }}] {{ p.title }}</h3>
-        <div>{{ p.body }}</div>
-        <button (click)="router.navigateByUrl('/home/post/' + p.id)">Read more</button>
+      <div class="card bg-base-200 mb-[16px]">
+        <div class="card-body">
+          <h2 class="card-title text-warning">[Post {{ p.id }}] {{ p.title }}</h2>
+          <p>{{ p.body }}</p>
+          <div class="justify-end card-actions">
+            <button class="app-btn-primary" (click)="router.navigateByUrl('/home/post/' + p.id)">
+              Read more
+            </button>
+          </div>
+        </div>
       </div>
     } @placeholder {
       <div class="h-[200px]"></div>

src/app/features/post/components/post.component.ts

@@ -24,7 +24,7 @@ import { PostService } from "../services";
         <div>loading...</div>
       }
     </div>
-    <button (click)="router.navigateByUrl('/home/post')">Back List</button>
+    <button class="app-btn-primary" (click)="router.navigateByUrl('/home/post')">Back List</button>
   `,
 })
 export class PostDetailComponent implements OnInit {

src/app/features/post/pages/post-detail.component.ts

@@ -11,7 +11,7 @@ import { PostService } from "../services";
   standalone: true,
   template: `
     <div class="styled-box">
-      <div>Post Listing Page</div>
+      <div class="divider text-accent">Post Listing Page</div>
       @let posts = posts$ | async;
       @let data = posts?.data;
       @if (data) {
@@ -23,7 +23,7 @@ import { PostService } from "../services";
       } @else if (posts?.error) {
         <div class="text-[red]">Loading posts failed....</div>
       } @else {
-        <div class="text-center">Loading...</div>
+        <span class="loading loading-spinner loading-xl"></span>
       }
     </div>
   `,

src/app/features/post/pages/post-listing.component.ts

@@ -9,10 +9,16 @@ import { User } from "../models";
   template: `
     @defer (on viewport) {
       @let u = data();
-      <div class="styled-box !min-h-full">
-        <h3 class="underline">[User {{ u.id }}] {{ u.name }}</h3>
-        <div>{{ u.phone }}</div>
-        <button (click)="router.navigateByUrl('/home/user/' + u.id)">Read more</button>
+      <div class="card bg-base-200 mb-[16px]">
+        <div class="card-body">
+          <h2 class="card-title text-warning">[User {{ u.id }}] {{ u.name }}</h2>
+          <p>{{ u.phone }}</p>
+          <div class="justify-end card-actions">
+            <button class="app-btn-primary" (click)="router.navigateByUrl('/home/user/' + u.id)">
+              Read more
+            </button>
+          </div>
+        </div>
       </div>
     } @placeholder {
       <div class="h-[200px]"></div>