From 9e03624bb06c221ca034675e0031e3c5b96f92b7 Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Wed, 3 Dec 2025 23:32:04 +0100
Subject: [PATCH] feat(client): add chapter icons for A1 Chinese and A1 Spanish
 chapters (#64244)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 client/src/assets/chapter-icon.tsx | 30 ++++++++++++++++++++++++++++--
 shared/config/chapters.ts          | 15 +++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/client/src/assets/chapter-icon.tsx b/client/src/assets/chapter-icon.tsx
index 5d9fc02bc73..38163a459d2 100644
--- a/client/src/assets/chapter-icon.tsx
+++ b/client/src/assets/chapter-icon.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { FsdChapters } from '../../../shared-dist/config/chapters';
+import {
+  A1SpanishChapters,
+  FsdChapters,
+  A1ChineseChapters
+} from '../../../shared-dist/config/chapters';
 import DatabaseIcon from './icons/database';
 import JavaScriptIcon from './icons/javascript';
 import ReactIcon from './icons/react';
@@ -10,6 +14,15 @@ import Css from './icons/css';
 import NodeIcon from './icons/node';
 import Python from './icons/python';
 import Graduation from './icons/graduation';
+import {
+  faComments,
+  faCubes,
+  faDoorOpen,
+  faHands,
+  faIdCard,
+  faPeopleGroup
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const iconMap = {
   [FsdChapters.Welcome]: FreeCodeCampIcon,
@@ -29,7 +42,16 @@ const iconMap = {
   [FsdChapters.RdbExam]: Graduation,
   [FsdChapters.Bed]: NodeIcon,
   [FsdChapters.BedExam]: Graduation,
-  [FsdChapters.FsdExam]: Graduation
+  [FsdChapters.FsdExam]: Graduation,
+  [A1ChineseChapters.zhA1Welcome]: faDoorOpen,
+  [A1ChineseChapters.zhA1PinYin]: faCubes,
+  [A1ChineseChapters.zhA1Greetings]: faComments,
+  [A1ChineseChapters.zhA1Family]: faPeopleGroup,
+  [A1ChineseChapters.zhA1Expressing]: faHands,
+  [A1SpanishChapters.esA1Welcome]: faDoorOpen,
+  [A1SpanishChapters.esA1Fundamentals]: faCubes,
+  [A1SpanishChapters.esA1Greetings]: faComments,
+  [A1SpanishChapters.esA1Details]: faIdCard
 };
 
 type ChapterIconProps = {
@@ -40,5 +62,9 @@ export function ChapterIcon(props: ChapterIconProps): JSX.Element {
   const { chapter, ...iconProps } = props;
   const Icon = iconMap[chapter] ?? ResponsiveDesign;
 
+  if (typeof Icon === 'object') {
+    return <FontAwesomeIcon icon={Icon} />;
+  }
+
   return <Icon {...iconProps} />;
 }
diff --git a/shared/config/chapters.ts b/shared/config/chapters.ts
index b41abe6ad09..fbda5315c62 100644
--- a/shared/config/chapters.ts
+++ b/shared/config/chapters.ts
@@ -27,6 +27,21 @@ export enum FsdChapters {
   RelationalDatabases = 'relational-databases'
 }
 
+export enum A1ChineseChapters {
+  zhA1Welcome = 'zh-a1-chapter-welcome-to-a1-professional-chinese',
+  zhA1PinYin = 'zh-a1-chapter-pinyin',
+  zhA1Greetings = 'zh-a1-chapter-greeting-and-self-introduction',
+  zhA1Family = 'zh-a1-chapter-introducing-colleagues-and-family',
+  zhA1Expressing = 'zh-a1-chapter-expressing-what-you-can-and-cant-do'
+}
+
+export enum A1SpanishChapters {
+  esA1Welcome = 'es-a1-chapter-welcome-to-a1-professional-spanish',
+  esA1Fundamentals = 'es-a1-chapter-spanish-fundamentals',
+  esA1Greetings = 'es-a1-chapter-greetings-and-introductions',
+  esA1Details = 'es-a1-chapter-basic-personal-details'
+}
+
 export interface Chapter {
   dashedName: string;
   comingSoon?: boolean;