From 93f789df6b3534747a56cc3fc43417def6f54aa2 Mon Sep 17 00:00:00 2001
From: Daniel James Smith <djsmith85@users.noreply.github.com>
Date: Thu, 20 Mar 2025 11:35:42 +0100
Subject: [PATCH] Create AchievementCard component

---
 .../achievement-card.component.html           | 10 ++++
 .../achievement-card.component.ts             | 52 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 libs/angular/src/tools/achievements/achievement-card.component.html
 create mode 100644 libs/angular/src/tools/achievements/achievement-card.component.ts

diff --git a/libs/angular/src/tools/achievements/achievement-card.component.html b/libs/angular/src/tools/achievements/achievement-card.component.html
new file mode 100644
index 00000000000..fb611b2e44d
--- /dev/null
+++ b/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>
diff --git a/libs/angular/src/tools/achievements/achievement-card.component.ts b/libs/angular/src/tools/achievements/achievement-card.component.ts
new file mode 100644
index 00000000000..e483538e3af
--- /dev/null
+++ b/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 = "";
+        }
+      });
+    });
+  }
+}