feat: add event component

apps/frontend/src/app/app.routes.ts

@@ -35,6 +35,11 @@ export const appRoutes: Route[] = [
       ),
     canActivate: [authGuard],
   },
+  {
+    path: 'event',
+    loadComponent: () =>
+      import('./pages/event/event.component').then((m) => m.EventComponent),
+  },
   { path: 'landing', redirectTo: '', pathMatch: 'full' },
   { path: '**', redirectTo: '' },
 ];

apps/frontend/src/app/pages/event/event.component.html

@@ -0,0 +1,161 @@
+<div class="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-2xl mx-auto">
+    <div class="bg-white shadow-lg rounded-lg px-8 py-10">
+      <div class="text-center mb-8">
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">Add a New Event</h1>
+        <p class="text-gray-600">Create an exciting event for the community</p>
+      </div>
+
+      <form [formGroup]="eventForm" (ngSubmit)="onSubmit()" class="space-y-6">
+        <!-- Conference Selection -->
+        <div>
+          <label
+            for="conference"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Conference <span class="text-red-500">*</span>
+          </label>
+          <select
+            formControlName="conference"
+            id="conference"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 bg-white"
+          >
+            <option value="" disabled selected>Select Conference</option>
+            @for(conf of conferences; track conf.id) {
+            <option [value]="conf.id">{{ conf.name }}</option>
+            }
+          </select>
+        </div>
+
+        <!-- Event Name -->
+        <div>
+          <label
+            for="eventName"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Event Name <span class="text-red-500">*</span>
+          </label>
+          <input
+            id="eventName"
+            formControlName="name"
+            type="text"
+            placeholder="Enter event name"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
+          />
+        </div>
+
+        <!-- Event Location -->
+        <div>
+          <label
+            for="eventLocation"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Event Location <span class="text-red-500">*</span>
+          </label>
+          <input
+            id="eventLocation"
+            formControlName="location"
+            type="text"
+            placeholder="Enter event location"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
+          />
+        </div>
+
+        <!-- Event Description -->
+        <div>
+          <label
+            for="eventDescription"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Event Description
+          </label>
+          <textarea
+            id="eventDescription"
+            formControlName="description"
+            rows="4"
+            placeholder="Describe your event..."
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-vertical"
+          ></textarea>
+        </div>
+
+        <!-- Date and Time Row -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Event Date -->
+          <div>
+            <label
+              for="eventDate"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Event Date <span class="text-red-500">*</span>
+            </label>
+            <input
+              id="eventDate"
+              formControlName="date"
+              type="date"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
+            />
+          </div>
+
+          <!-- Event Time -->
+          <div>
+            <label
+              for="eventTime"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
+              Event Time <span class="text-red-500">*</span>
+            </label>
+            <input
+              id="eventTime"
+              formControlName="time"
+              type="time"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
+            />
+          </div>
+        </div>
+
+        <!-- Event Capacity -->
+        <div>
+          <label
+            for="eventCapacity"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Event Capacity
+          </label>
+          <input
+            id="eventCapacity"
+            formControlName="capacity"
+            type="number"
+            min="1"
+            placeholder="Maximum number of participants"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
+          />
+        </div>
+
+        <!-- Submit Button -->
+        <div class="pt-6">
+          <button
+            type="submit"
+            class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-lg"
+          >
+            <span class="flex items-center justify-center">
+              <svg
+                class="w-5 h-5 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                ></path>
+              </svg>
+              Create Event
+            </span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

apps/frontend/src/app/pages/event/event.component.spec.ts

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

apps/frontend/src/app/pages/event/event.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+
+@Component({
+  selector: 'app-event',
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './event.component.html',
+  styleUrl: './event.component.css',
+})
+export class EventComponent {
+  conferences = [
+    { id: 1, name: 'Angular Connect' },
+    { id: 2, name: 'ng-conf' },
+    { id: 3, name: 'ngVikings' },
+  ];
+
+  eventForm = new FormGroup({
+    conference: new FormControl('', Validators.required),
+    eventType: new FormControl('', Validators.required),
+    date: new FormControl('', Validators.required),
+    location: new FormControl('', Validators.required),
+    name: new FormControl('', Validators.required),
+    description: new FormControl('', Validators.required),
+    time: new FormControl('', Validators.required),
+    capacity: new FormControl('', Validators.required),
+  });
+
+  onSubmit() {
+    if (this.eventForm.valid) {
+      console.log(this.eventForm.value);
+    } else {
+      console.log('Form is invalid');
+    }
+  }
+}