feat: lang switcher

src/app/components/lang-switch-btn/lang-switch-btn.html

@@ -0,0 +1,5 @@
+<button class="container" (click)="updateLanguage()" (keypress)="updateLanguage()">
+    <img 
+        [src]="flagSrc()" 
+        alt="">
+</button>

src/app/components/lang-switch-btn/lang-switch-btn.scss

@@ -0,0 +1,19 @@
+.container {
+  background-color: transparent;
+  border: none;
+
+  align-items: center;
+  display: flex;
+  min-height: 65px;
+
+  cursor: pointer;
+  img {
+    width: 50px;
+  }
+  @media screen and (min-width: 480px) {
+    min-height: 76.8px;
+    img {
+      width: unset;
+    }
+  }
+}

src/app/components/lang-switch-btn/lang-switch-btn.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LangSwitchBtn } from './lang-switch-btn';
+import { LanguageManager } from '../../services/language-manager';
+import { By } from '@angular/platform-browser';
+
+describe('LangSwitchBtn', () => {
+  let component: LangSwitchBtn;
+  let fixture: ComponentFixture<LangSwitchBtn>;
+  let languageManager: jasmine.SpyObj<LanguageManager>;
+
+  beforeEach(async () => {
+    languageManager = jasmine.createSpyObj(LanguageManager, ['selectedLanguage$', 'setLanguage']);
+    await TestBed.configureTestingModule({
+      imports: [LangSwitchBtn],
+      providers: [{ provide: LanguageManager, useValue: languageManager }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LangSwitchBtn);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should show spanish flag', () => {
+    languageManager.selectedLanguage$.and.returnValue('en');
+    fixture.detectChanges();
+    const img = fixture.debugElement.query(By.css('img')).attributes;
+    expect(img['src']).toEqual('images/sp_flag.png');
+  });
+
+  it('should updateLanguage on click', () => {
+    const updateLanguageSpy = spyOn(component, 'updateLanguage').and.callThrough();
+    languageManager.selectedLanguage$.and.returnValue('en');
+    fixture.detectChanges();
+    const container = fixture.debugElement.query(By.css('.container'));
+    container.triggerEventHandler('click');
+    expect(updateLanguageSpy).toHaveBeenCalledTimes(1);
+  });
+});

src/app/components/lang-switch-btn/lang-switch-btn.ts

@@ -0,0 +1,25 @@
+import { Component, computed, inject } from '@angular/core';
+import { LanguageManager } from '../../services/language-manager';
+
+@Component({
+  selector: 'app-lang-switch-btn',
+  templateUrl: './lang-switch-btn.html',
+  styleUrl: './lang-switch-btn.scss',
+})
+export class LangSwitchBtn {
+  protected readonly languageManager = inject(LanguageManager);
+
+  flagSrc = computed(() => {
+    if (this.languageManager.selectedLanguage$() === 'en') {
+      return 'images/sp_flag.png';
+    } else {
+      return 'images/uk_flag.png';
+    }
+  });
+
+  updateLanguage() {
+    this.languageManager.setLanguage(
+      this.languageManager.selectedLanguage$() === 'en' ? 'es' : 'en'
+    );
+  }
+}