feat: add github avatar to the 300 (#314)

apps/app/src/app/pages/(home)/components/th-item.component.ts

@@ -1,23 +1,31 @@
-import { Component, Input } from '@angular/core';
-import { SpartanLogoComponent } from '@spartan-ng/app/app/shared/spartan-logo.component';
+import { NgOptimizedImage } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
 
 @Component({
  selector: 'spartan-th-item',
  standalone: true,
- imports: [SpartanLogoComponent],
+ imports: [NgOptimizedImage],
  host: {
  class: 'inline-flex flex-col justify-center items-center',
  },
  template: `
- <a class="flex flex-col items-center" [href]="href" target="_blank">
- <spartan-logo class="p-1 rounded-full bg-primary h-9 w-9 -rotate-90" />
+ <a class="flex flex-col items-center" [href]="href()" target="_blank">
+ <img
+ loading="lazy"
+ [ngSrc]="src()"
+ width="40"
+ height="40"
+ [alt]=contributor()
+ class="rounded-full"
+ />
  <span class="mt-1 inline-block whitespace-nowrap text-[.7rem] font-medium hover:underline">
- <ng-content />
+ {{contributor()}}
  </span>
  </a>
  `,
 })
 export class ThreeHundredItemComponent {
- @Input()
- href = '';
+ contributor = input.required<string>();
+ href = computed(() => `https://github.com/${this.contributor()}`)
+ src = computed(() => `${this.href()}.png?size=80`)
 }

apps/app/src/app/pages/(home)/components/three-hundred.component.ts

@@ -11,7 +11,7 @@ import { ThreeHundredItemComponent } from './th-item.component';
  },
  template: `
  @for (contributor of _contributors; track $index) {
- <spartan-th-item class="mb-2" [href]="'https://github.com/' + contributor">{{ contributor }}</spartan-th-item>
+ <spartan-th-item class="mb-2" [contributor]="contributor"/>
  }
  @for (item of _rest; track $index) {
  <spartan-th-item-placeholder class="mb-2" />