hikari/client/src/app/products/products.html

<h1>Products</h1>
<img
  src="https://cdn.nhcarrigan.com/hikari.png"
  alt="Hikari"
  height="250"
  style="display: block; margin: auto;"
/>
<p>Excellent! What sort of product are you looking for?</p>
<div class="row">
  <button
    class="btn"
    (click)="selectCategory('community')"
    [disabled]="view === 'community' ? true : false"
  >
    Community Tooling and Integrations
  </button>
  <button
    class="btn"
    (click)="selectCategory('websites')"
    [disabled]="view === 'websites' ? true : false"
  >
    Websites and APIs
  </button>
  <button
    class="btn"
    (click)="selectCategory('apps')"
    [disabled]="view === 'apps' ? true : false"
  >
    Apps and Games
  </button>
  <button
    class="btn"
    (click)="selectCategory('all')"
    [disabled]="view === 'all' ? true : false"
  >
    Show Me Everything!
  </button>
</div>
<p>And would you like to apply a filter?</p>
<div class="row">
  <button class="btn" (click)="toggleFilter('wip')">
    <span *ngIf="filters.wip">Hide</span
    ><span *ngIf="!filters.wip">Show</span> WIP
  </button>
  <button class="btn" (click)="toggleFilter('prod')">
    <span *ngIf="filters.prod">Hide</span
    ><span *ngIf="!filters.prod">Show</span> Production
  </button>
  <button class="btn" (click)="toggleFilter('paid')">
    <span *ngIf="filters.paid">Hide</span
    ><span *ngIf="!filters.paid">Show</span> Paid
  </button>
  <button class="btn" (click)="toggleFilter('free')">
    <span *ngIf="filters.free">Hide</span
    ><span *ngIf="!filters.free">Show</span> Free
  </button>
</div>
<hr />
<p *ngIf="products.length === 0">
  Products are loading, please wait a moment...
</p>
<div id="products">
  <div *ngFor="let product of products">
    <!-- Render as <a> if product has a URL -->
    <a
      *ngIf="product.url"
      [class]="product.wip ? 'product wip' : 'product'"
      [href]="product.url"
      target="_blank"
    >
      <h2 class="title">{{ product.name }}</h2>
      <img
        class="logo"
        [src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
        alt="{{ product.name }} Logo"
      />
      <p class="description">{{ product.description }}</p>
      <div class="icons">
        <i
          title="Under construction"
          *ngIf="product.wip"
          class="fa-solid fa-wrench"
          style="color: rgb(141, 23, 23)"
        ></i>
        <i
          title="Production Ready"
          *ngIf="!product.wip"
          class="fa-solid fa-check"
          style="color: rgb(31, 117, 19)"
        ></i>
        <i
          title="Requires Subscription"
          *ngIf="product.premium"
          class="fa-solid fa-money-bill-1-wave"
          style="color: rgb(145, 129, 40)"
        ></i>
        <i
          title="Free to Use"
          *ngIf="!product.premium"
          class="fa-solid fa-piggy-bank"
          style="color: rgb(116, 37, 206)"
        ></i>
      </div>
    </a>

    <!-- Render as <div> if no URL -->
    <div *ngIf="!product.url" [class]="product.wip ? 'product wip' : 'product'">
      <h2 class="title">{{ product.name }}</h2>
      <img
        class="logo"
        [src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
        alt="{{ product.name }} Logo"
      />
      <p class="description">{{ product.description }}</p>
      <div *ngIf="product.wip || product.premium" class="icons">
        <i
          title="Under construction"
          *ngIf="product.wip"
          class="fa-solid fa-wrench"
          style="color: rgb(141, 23, 23)"
        ></i>
        <i
          title="Production Ready"
          *ngIf="!product.wip"
          class="fa-solid fa-check"
          style="color: rgb(31, 117, 19)"
        ></i>
        <i
          title="Requires Subscription"
          *ngIf="product.premium"
          class="fa-solid fa-money-bill-1-wave"
          style="color: rgb(145, 129, 40)"
        ></i>
        <i
          title="Free to Use"
          *ngIf="!product.premium"
          class="fa-solid fa-piggy-bank"
          style="color: rgb(116, 37, 206)"
        ></i>
      </div>
    </div>
  </div>
</div>
<hr />
<a
  href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA"
  target="_blank"
  class="btn"
  >I want something custom...</a
>