Add Popup Component

src/app/components/popup/popup.html

@@ -0,0 +1,13 @@
+<header class="popup-header">
+  <div class="header-left">
+    <ng-content select="[header-left]"></ng-content>
+  </div>
+
+  <div class="header-right">
+    <button class="material-symbols-outlined icon-24 chevron" (click)="onClose()">close</button>
+  </div>
+</header>
+
+<div class="popup-body">
+  <ng-content></ng-content>
+</div>

src/app/components/popup/popup.ts

@@ -0,0 +1,16 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+
+@Component({
+  selector: 'popup',
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class PopupComponent {
+  close = output<void>();
+
+  onClose() {
+    this.close.emit()
+  }
+}

src/app/ui/settings/popup.html

@@ -0,0 +1,16 @@
+<!--<popup (close)="handleClose()">
+  <div header-left class="profile-section">
+    <img [src]="userProfileImg" alt="profile" class="avatar">
+    <span>{{ userName }}</span>
+  </div>
+
+  <div class="settings-content">
+    <label>Language</label>
+    <dropdown [options]="languages"
+              placeholder="Choose Language"></dropdown>
+    <switch></switch>
+
+    <label>Appearance</label>
+
+  </div>
+</popup>-->

src/app/ui/settings/settings.ts

@@ -0,0 +1,12 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+import { PopupComponent } from '../../components/popup/popup';
+
+@Component({
+  selector: 'settings-popup',
+  imports: [PopupComponent, Dropdown, Switch],
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class SettingsPopup {}

src/styles.scss

@@ -8,5 +8,6 @@ body {
   margin: 0;
 
   overscroll-behavior-x: none;
+  background-color: white;
 }