Add Settings Container Component

src/app/features/settings/settings.html

@@ -1,43 +1,41 @@
 <app-popup (closeRequest)="close()" [position]="position()">
   <div header-left class="profile-section">
     <img ngSrc="/guest_profile.png" alt="profile" class="avatar" width="24" height="24">
-    <span>{{ settingsService.userName() }}</span>
+    <span>{{ settingsService.isGuest() ? translation.settings.guest : settingsService.userName() }}</span>
   </div>
 
   <div class="settings-content">
     <settings-category [headerLabel]="translation.settings.language">
-      <div class="settings-container">
-        <dropdown [options]="languages"
-                  [value]="settingsService.language()"
-                  (selectionChange)="onLanguageChange($event)"
-                  icon="language"></dropdown>
-      </div>
+      <settings-container
+        [settingsType]="SettingsType.Dropdown"
+        [options]="languages"
+        [value]="settingsService.language()"
+        [labelText]="translation.settings.language" labelIcon="language"
+        (onChange)="onLanguageChange($event)">
+      </settings-container>
 
-      <div class="settings-container">
-        <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">match_case</span>
-          <span>{{ translation.settings.romanisation }}</span>
-        </div>
-        <switch [isActive]="settingsService.romanisation()" (toggle)="onRomanisationChange($event)"></switch>
-      </div>
+      <settings-container
+        [settingsType]="SettingsType.Switch"
+        [value]="settingsService.romanisation()"
+        [labelText]="translation.settings.romanisation" labelIcon="match_case"
+        (onChange)="onRomanisationChange($event)">
+      </settings-container>
     </settings-category>
 
     <settings-category [headerLabel]="translation.settings.appearance">
-      <div class="settings-container">
-        <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">dark_mode</span>
-          <span>{{ translation.settings.darkMode }}</span>
-        </div>
-        <switch [isActive]="settingsService.darkMode()" (toggle)="onDarkModeChange($event)"></switch>
-      </div>
+      <settings-container
+        [settingsType]="SettingsType.Switch"
+        [value]="settingsService.darkMode()"
+        [labelText]="translation.settings.darkMode" labelIcon="dark_mode"
+        (onChange)="onDarkModeChange($event)">
+      </settings-container>
 
-      <div class="settings-container">
-        <div class="settings-name">
-          <span class="material-symbols-outlined icon-24 settings-icon" aria-hidden="true">motion_photos_paused</span>
-          <span>{{ translation.settings.reduceAnimation }}</span>
-        </div>
-        <switch [isActive]="settingsService.reduceAnimation()" (toggle)="onReduceAnimationChange($event)"></switch>
-      </div>
+      <settings-container
+        [settingsType]="SettingsType.Switch"
+        [value]="settingsService.reduceAnimation()"
+        [labelText]="translation.settings.reduceAnimation" labelIcon="motion_photos_paused"
+        (onChange)="onReduceAnimationChange($event)">
+      </settings-container>
     </settings-category>
   </div>