User Profile

import { Component } from '@angular/core';
import { NgOatAvatar } from '@letsprogram/ng-oat/avatar';
import { NgOatBadge } from '@letsprogram/ng-oat/badge';

@Component({
  selector: 'app-profile',
  imports: [NgOatAvatar, NgOatBadge],
  template: `
    <div class="flex justify-center p-8">
      <div class="card max-w-md w-full">
        <div class="flex flex-col gap-4 items-center text-center">
          <ng-oat-avatar initials="SK" size="xl" />
          <div>
            <h3 class="mb-0">Sashi Kumar</h3>
            <p class="text-muted mb-0">Full-stack developer</p>
          </div>
          <div class="flex flex-wrap items-center gap-2">
            <ng-oat-badge variant="secondary">Angular</ng-oat-badge>
            <ng-oat-badge variant="success">TypeScript</ng-oat-badge>
            <ng-oat-badge variant="outline">CSS</ng-oat-badge>
          </div>
          <div class="flex flex-wrap items-center gap-6">
            <div class="flex flex-col gap-3 items-center">
              <strong class="text-3">142</strong>
              <small class="text-muted">Posts</small>
            </div>
            <div class="flex flex-col gap-3 items-center">
              <strong class="text-3">3.2K</strong>
              <small class="text-muted">Followers</small>
            </div>
            <div class="flex flex-col gap-3 items-center">
              <strong class="text-3">284</strong>
              <small class="text-muted">Following</small>
            </div>
          </div>
          <hr class="w-full" />
          <p class="text-left">Passionate about building lightweight, accessible UI components.</p>
          <div class="flex flex-wrap items-center gap-2 w-full">
            <button class="btn flex-1">Follow</button>
            <button class="btn outline flex-1">Message</button>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class ProfileComponent {}