design contacts

src/app/components/contacts/contacts.component.html

@@ -7,11 +7,31 @@
       </div>
     </button>
 
+    <div class="content">
       @for (sortLetter of usersFirstLetter; track allUsers) {
-    <div>{{ sortLetter }}</div>
-    @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter; let
-    index = $index) {
-    <div>{{ usersByFirstLetter[sortLetter][index] }}</div>
+      <div class="first-letter">{{ sortLetter }}</div>
+      <div class="line"></div>
+      @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter;
+      let index = $index) {
+      <div class="contact">
+        <div
+          class="circle"
+          [ngStyle]="{
+            'background-color': displayInitialsColor(
+              usersByFirstLetter[sortLetter][index]
+            )
+          }"
+        >
+          <div class="initials">
+            {{ displayInitials(usersByFirstLetter[sortLetter][index]) }}
+          </div>
+        </div>
+        <div class="details">
+          <p>{{ displayUserName(usersByFirstLetter[sortLetter][index]) }}</p>
+          <a href="tel:">asdasdasd</a>
+        </div>
+      </div>
       } }
     </div>
+  </div>
 </section>

src/app/components/contacts/contacts.component.scss

@@ -1,3 +1,7 @@
+section {
+  position: relative;
+}
+
 .btn-inside {
   display: flex;
   justify-content: center;
@@ -9,8 +13,9 @@
   justify-content: space-around;
   align-items: center;
   height: 56px;
-  width: 302px;
+  width: 300px;
   padding: 8px 8px 8px 16px;
+  margin-left: 45px;
   border-radius: 10px;
   border: 0;
   background-color: var(--dark-blue);
@@ -26,3 +31,73 @@
     padding-left: 12px;
   }
 }
+
+.left-frame {
+  position: absolute;
+  top: -64px;
+  left: -64px;
+  width: 400px;
+  height: calc(100vh - 128px);
+  background-color: var(--white);
+  padding-top: 32px;
+  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 48px 24px 24px 24px;
+}
+
+.first-letter {
+  font-size: 20px;
+  font-weight: 400;
+  padding-left: 38px;
+  margin-bottom: 12px;
+}
+
+.line {
+  width: 100%;
+  height: 1px;
+  margin-bottom: 6px;
+  background-color: var(--light-gray);
+}
+
+.contact {
+  display: flex;
+  align-items: center;
+  padding: 15px 24px;
+  border-radius: 10px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--very-light-gray);
+  }
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 100%;
+  .initials {
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}
+
+.details {
+  margin-left: 32px;
+  p {
+    font-size: 20px;
+    font-weight: 400;
+    margin-bottom: 6px;
+  }
+  a {
+    font-size: 16px;
+    font-weight: 400;
+    text-decoration: none;
+    color: var(--light-blue);
+  }
+}

src/app/components/contacts/contacts.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-contacts',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './contacts.component.html',
   styleUrl: './contacts.component.scss',
 })
@@ -61,5 +62,18 @@ export class ContactsComponent {
       .map((user) => user.firstName);
   }
 
-  userName() {}
+  displayUserName(id: string) {
+    let currentUser = this.allUsers.filter((user) => user.id === id);
+    return currentUser[0].firstName + ', ' + currentUser[0].lastName;
+  }
+
+  displayInitials(id: string) {
+    let currentUser = this.allUsers.filter((user) => user.id === id);
+    return currentUser[0].initials;
+  }
+
+  displayInitialsColor(id: string) {
+    let currentUser = this.allUsers.filter((user) => user.id === id);
+    return currentUser[0].color;
+  }
 }