micro-frontend/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html

<div class="h-screen bg-gray-100 flex flex-col">

    <header class="flex justify-between items-center py-4 px-6">
      @if (mode == 'default') {
      <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
          <div>
            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
             <span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
            </h1>
            <p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
            </div>
          </div>
        <!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
      } @else if (mode == 'add')  {
        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
              <div>
                <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                  <button (click)="onCancelProject()"
                  class="group flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-all mr-1"
                  title="ย้อนกลับ">
                      <i class="fas fa-arrow-left text-gray-400 group-hover:text-red-900 text-lg"></i>
                  </button>
                  <div class="h-6 w-px bg-gray-200 mr-2"></div>

                  <span class="w-2 h-8 bg-red-900 rounded-full"></span> เพิ่มโครงการ
                </h1>
                <p class="text-gray-500 mt-1 text-sm pl-14">กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ</p>
              </div>
          </div>
        }

    </header>

    <div class="grow overflow-y-auto px-6 pb-6">

        @if ( mode == 'default') {
            <app-main-project></app-main-project>
        } @else if ( mode == 'add') {
          <app-main-project-add
              (save)="onSaveProject($event)"
              (cancel)="onCancelProject()">
          </app-main-project-add>
        }

    </div>
</div>