Contact Us

import { Component, signal } from '@angular/core';
import { NgOatAlert } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-contact',
  imports: [NgOatAlert],
  template: `
    <div class="flex justify-center p-8">
      <div class="card max-w-lg w-100">
        <header>
          <h3 class="mb-0">Get in Touch</h3>
          <p class="text-light mb-0">We'd love to hear from you.</p>
        </header>
        <div class="vstack gap-3">
          @if (submitted()) {
            <ng-oat-alert variant="success">✓ Message sent!</ng-oat-alert>
          }
          <div class="grid cols-2">
            <label>First name <input type="text" placeholder="John" /></label>
            <label>Last name <input type="text" placeholder="Doe" /></label>
          </div>
          <label>Email <input type="email" placeholder="you@example.com" /></label>
          <label>Subject
            <select>
              <option value="">Select a topic</option>
              <option>General Inquiry</option>
              <option>Bug Report</option>
              <option>Feature Request</option>
            </select>
          </label>
          <label>Message <textarea rows="4" placeholder="Tell us more..."></textarea></label>
          <button class="btn" (click)="submitted.set(true)">Send Message</button>
        </div>
      </div>
    </div>
  `,
})
export class ContactComponent {
  submitted = signal(false);
}