Add events list table header component

eventz-ui/src/app/app.routes.ts

@@ -7,8 +7,7 @@ import { CheckoutComponent } from '../pages/checkout/checkout.component';
 import { CartComponent } from '../pages/cart/cart.component';
 import { AdminLayoutComponent } from '../layouts/admin-layout/admin-layout.component';
 import { DashboardComponent } from '../pages/admin/dashboard/dashboard.component';
-import { EventsTableComponent } from '../components/admin/events-table/events-table.component';
-import { AdminEventsListComponent } from '../components/admin/admin-events-list/admin-events-list.component';
+import { AdminEventsListComponent } from '../pages/admin/admin-events-list/admin-events-list.component';
 export const routes: Routes = [
    {path:'',component: LandingComponent},
    {path:'login', component: LoginComponent},

eventz-ui/src/components/admin/events-table/events-table.component.html

@@ -1,4 +1,5 @@
 <div class="flex flex-col bg-white rounded-lg p-4 mx-4 my-6">
+  <app-table-header></app-table-header>
 <div class="w-full overflow-x-auto">
   <table class="min-w-full text-sm text-left">
     <thead class="uppercase text-xs border-b-[1px] border-b-gray-300 text-eventTableColor">

eventz-ui/src/components/admin/events-table/events-table.component.ts

@@ -3,12 +3,13 @@ import { EventItem } from '../../../interfaces/interface';
 import  { CommonModule } from '@angular/common'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEllipsisV, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { TableHeaderComponent } from "../table-header/table-header.component";
 
 
 @Component({
   selector: 'app-events-table',
   standalone: true,
-  imports: [CommonModule, FontAwesomeModule],
+  imports: [CommonModule, FontAwesomeModule, TableHeaderComponent],
   templateUrl: './events-table.component.html',
   styleUrl: './events-table.component.scss'
 })

eventz-ui/src/components/admin/table-header/table-header.component.html

@@ -0,0 +1,42 @@
+<div class="flex flex-col justify-between p-2">
+  <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
+    <div class="flex items-center gap-2">
+      <div
+        class="bg-eventTogglerBackground rounded-md cursor-pointer py-2 px-4"
+      >
+        <p>Events</p>
+      </div>
+      <div class="w-[1px] h-[30px] bg-eventTogglerBackground"></div>
+      <div
+        class="bg-eventTogglerBackground rounded-md cursor-pointer py-2 px-4"
+      >
+        <p>Organizers</p>
+      </div>
+      <div class="w-[1px] h-[30px] bg-eventTogglerBackground"></div>
+    </div>
+
+    <div class="flex items-center my-2 md:my-0">
+      <div
+        class="flex items-center justify-center bg-paleBlue text-deepBlue h-8 w-8 rounded-full cursor-pointer"
+      >
+        <fa-icon [icon]="faPlus" />
+      </div>
+      <p class="text-lg text-deepBlue mx-2">Add Event</p>
+    </div>
+  </div>
+  <hr class="my-3">
+  <div class="flex flex-col md:flex-row items-start md:items-center justify-between mt-0">
+    <div>
+      <h2 class="font-semibold text-lg text-eventTableColor">Events List</h2>
+    </div>
+    <div class="flex items-center">
+     <div class="flex bg-searchBackground rounded-3xl px-4 py-2 w-4/5 md:w-full">
+       <fa-icon class="text-eventTableColor mx-2" [icon]="faSearch" />
+      <input class="border-0 bg-transparent text-sm hover: outline-none" placeholder="search" />
+     </div>
+      <div class="bg-searchBackground rounded-md p-2 ml-2 md:ml-4">
+         <fa-icon class="text-deepBlue" [icon]="faElipsisH" />
+      </div>
+    </div>
+  </div>
+</div>

eventz-ui/src/components/admin/table-header/table-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableHeaderComponent } from './table-header.component';
+
+describe('TableHeaderComponent', () => {
+  let component: TableHeaderComponent;
+  let fixture: ComponentFixture<TableHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableHeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

eventz-ui/src/components/admin/table-header/table-header.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faEllipsisH, faPlus, faSearch } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-table-header',
+  standalone: true,
+  imports: [FontAwesomeModule],
+  templateUrl: './table-header.component.html',
+  styleUrl: './table-header.component.scss'
+})
+export class TableHeaderComponent {
+    faElipsisH = faEllipsisH;
+    faPlus = faPlus;
+    faSearch = faSearch;
+}

eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.ts → eventz-ui/src/pages/admin/admin-events-list/admin-events-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { EventsTableComponent } from "../events-table/events-table.component";
+import { EventsTableComponent } from "../../../components/admin/events-table/events-table.component";
 
 @Component({
   selector: 'app-admin-events-list',

eventz-ui/tailwind.config.js

@@ -21,7 +21,9 @@ module.exports = {
         paleGray: '#CCCCC',
         adminBackground: '#F5F7FA',
         upcomingEventColor: '#718EBF',
-        eventTableColor: '#2B3674'
+        eventTableColor: '#2B3674',
+        eventTogglerBackground: '#edeff6',
+        searchBackground: '#F4F7FE'
       },
       boxShadow: {
         'customWhite': 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',