feat: add github avatar to the 300

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" />