Create AchievementCard component

libs/angular/src/tools/achievements/achievement-card.component.html

@@ -0,0 +1,10 @@
+<bit-card class="{{ cardClass }}">
+  <div class="tw-flex tw-items-center tw-justify-center">
+    <bit-icon [icon]="icon"></bit-icon>
+  </div>
+  <h2 bitTypography="h6" class="tw-text-center">{{ title() }}</h2>
+  <h3 bitTypography="body2" class="tw-text-center">{{ description() }}</h3>
+  @if (earned()) {
+    <h3 bitTypography="body2" class="tw-text-center">{{ date() }}</h3>
+  }
+</bit-card>

libs/angular/src/tools/achievements/achievement-card.component.ts

@@ -0,0 +1,52 @@
+import { CommonModule } from "@angular/common";
+import { Component, effect, input, untracked } from "@angular/core";
+
+import {
+  ButtonModule,
+  CardComponent,
+  Icon,
+  IconModule,
+  ItemModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { AchievementIcon } from "./achievement-icon";
+import { NotAchievedIcon } from "./not-achieved-icon";
+
+@Component({
+  selector: "achievement-card",
+  templateUrl: "achievement-card.component.html",
+  standalone: true,
+  imports: [CommonModule, ItemModule, ButtonModule, IconModule, TypographyModule, CardComponent],
+})
+export class AchievementCard {
+  protected icon: Icon = NotAchievedIcon;
+
+  title = input.required<string>();
+  description = input.required<string>();
+
+  earned = input<boolean>(false);
+  progress = input<number>(0);
+  date = input<Date>();
+
+  protected cardClass: string;
+  constructor() {
+    effect(() => {
+      const earned = this.earned();
+      const progress = this.progress();
+
+      untracked(() => {
+        if (earned) {
+          this.icon = AchievementIcon;
+          this.cardClass = "tw-bg-success-100";
+        } else if (progress > 0) {
+          this.icon = AchievementIcon;
+          this.cardClass = "tw-bg-info-100";
+        } else {
+          this.icon = NotAchievedIcon;
+          this.cardClass = "";
+        }
+      });
+    });
+  }
+}