landing-app/landing/src/app/ui/member-detail.ts

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';
import {
  PiAvatarComponent,
  PiChipComponent,
  PiTextColorDirective,
  PiTextLargeDirective,
  PiTextWeightBoldDirective,
} from '@pi/ui';

import type { Locale } from '../core/api';
import type { PublicMember } from '../core/api.types';
import type { Copy } from '../core/copy';
import { ContactCta } from './contact-cta';
import { memberLinks } from './member-card';
import { ProjectCard } from './project-card';
import { TechnologyChip } from './technology-chip';

/**
 * Someone in the collective, on their own address: who they are, what they
 * work with, and what they have worked on.
 *
 * The bio is plain text from a textarea, not HTML, so it is printed as text
 * with its line breaks kept rather than handed to `innerHTML`.
 */
@Component({
  selector: 'app-member-detail',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ContactCta,
    PiAvatarComponent,
    PiChipComponent,
    PiTextColorDirective,
    PiTextLargeDirective,
    PiTextWeightBoldDirective,
    ProjectCard,
    TechnologyChip,
  ],
  styleUrl: './member-detail.scss',
  template: `
    <header class="content-hero">
      <div class="landing-shell member-hero">
        <pi-avatar
          class="member-hero__avatar"
          size="x-large"
          shape="circle"
          color="primary"
          icon="user"
          [image]="member().avatar?.url"
          [alt]="member().avatar?.alt"
          [name]="member().name"
        />

        <div>
          <p class="landing-eyebrow">{{ copy().nav.team }}</p>
          <h1 bold class="content-hero__title">{{ member().name }}</h1>

          @if (member().headline; as headline) {
            <p l pi-color color="grey" class="content-hero__lead">
              {{ headline }}
            </p>
          }

          @if (member().is_founder || !member().is_current) {
            <ul class="content-hero__chips">
              @if (member().is_founder) {
                <li>
                  <pi-chip
                    size="small"
                    color="primary"
                    [label]="copy().labels.founder"
                  />
                </li>
              }
              @if (!member().is_current) {
                <li>
                  <pi-chip
                    size="small"
                    appearance="outline"
                    [label]="copy().labels.alumni"
                  />
                </li>
              }
            </ul>
          }
        </div>
      </div>
    </header>

    <div class="landing-shell content-page__layout">
      <article class="content-page__main">
        @if (member().bio; as bio) {
          <p class="member-bio">{{ bio }}</p>
        }

        @if ((member().projects ?? []).length > 0) {
          <section class="content-page__section">
            <h2>{{ copy().member.projects }}</h2>
            <div class="member-projects">
              @for (project of member().projects; track project.id) {
                <app-project-card
                [project]="project"
                [copy]="copy()"
                [locale]="locale()"
              />
              }
            </div>
          </section>
        }
      </article>

      <aside class="content-page__aside">
        @if (since() || links().length > 0) {
          <div class="landing-card content-page__panel">
            <dl class="content-page__facts">
              @if (since(); as since) {
                <div>
                  <dt>{{ copy().member.since }}</dt>
                  <dd>{{ since }}</dd>
                </div>
              }
              @if (links().length > 0) {
                <div>
                  <dt>{{ copy().member.links }}</dt>
                  <dd>
                    <ul class="member-links">
                      @for (link of links(); track link.url) {
                        <li>
                          <a
                            [href]="link.url"
                            target="_blank"
                            rel="noopener me"
                            >{{ link.label }}</a
                          >
                        </li>
                      }
                    </ul>
                  </dd>
                </div>
              }
            </dl>
          </div>
        }

        @if ((member().technologies ?? []).length > 0) {
          <div class="landing-card content-page__panel">
            <h2>{{ copy().member.technologies }}</h2>
            <ul class="content-hero__chips member-technologies">
              @for (technology of member().technologies; track technology.id) {
                <li>
                  <app-technology-chip
                [technology]="technology"
                [locale]="locale()"
              />
                </li>
              }
            </ul>
          </div>
        }

        <app-contact-cta [copy]="copy()" [locale]="locale()" />
      </aside>
    </div>
  `,
})
export class MemberDetail {
  readonly member = input.required<PublicMember>();
  readonly copy = input.required<Copy>();
  readonly locale = input.required<Locale>();

  protected readonly links = computed(() => memberLinks(this.member()));

  protected readonly since = computed(() => {
    const joined = this.member().joined_at;

    return joined
      ? new Intl.DateTimeFormat(this.locale(), {
          month: 'long',
          year: 'numeric',
        }).format(new Date(joined))
      : null;
  });
}