🚀Moods Component For home pge

Frontend/src/app/pages/home/home.component.html

@@ -1,21 +1,19 @@
-<div class="min-h-screen dark:bg-stone-600 flex flex-col justify-center px-6 py-12 lg:px-8">
-  <div style="display: flex; justify-content: center; align-items: center;">
-    <button class="absolute bottom-4 left-4 p-2 bg-gray-300 dark:bg-gray-700 rounded-full" (click)="switchTheme()">
-      <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-           xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M21 12.79A9 9 0 1111.21 3a7 7 0 0010.79 9.79z" />
-      </svg>
-    </button>
-
-    <app-side-bar></app-side-bar>
-    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">{{ title }}</h1>
-
-    <div class="navbar-container ">
+<div class="min-h-screen dark:bg-stone-600 grid grid-cols-5 grid-rows-6 gap-4 px-6 py-12 lg:px-8" style="overflow: auto;">
+  <div class="col-start-1 col-span-5 row-start-1">
+    <div class="navbar-container">
       <app-navbar (selectedNavChange)="onNavChange($event)"></app-navbar>
     </div>
-    <img (click)="profile()" *ngIf="!themeService.isDarkModeActive()" src="../../../../assets/images/profile.png" alt="profile" class="w-8 h-8 shadow-lg dark:shadow-none absolute top-5 right-8 hover:cursor-pointer">
-    <img (click)="profile()" *ngIf="themeService.isDarkModeActive()" src="../../../../assets/images/profile (1).png" alt="profile" class="w-8 h-8 shadow-lg dark:shadow-none absolute top-5 right-8 hover:cursor-pointer">
-    <app-bottom-player></app-bottom-player>
+    <img (click)="profile()" *ngIf="!themeService.isDarkModeActive()" src="../../../../assets/images/profile.png" alt="profile" class="w-8 h-8 shadow-lg dark:shadow-none fixed top-5 right-8 hover:cursor-pointer">
+    <img (click)="profile()" *ngIf="themeService.isDarkModeActive()" src="../../../../assets/images/profile (1).png" alt="profile" class="w-8 h-8 shadow-lg dark:shadow-none fixed top-5 right-8 hover:cursor-pointer">
   </div>
-</div>
+  <app-side-bar class="col-start-1 col-span-1 row-start-1 row-span-6"></app-side-bar>
+  <app-moods class="col-start-2 col-span-4 row-start-2 row-span-5"></app-moods>
+  <button class="fixed bottom-4 left-4 p-2 bg-gray-300 dark:bg-gray-700 rounded-full" (click)="switchTheme()">
+    <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M21 12.79A9 9 0 1111.21 3a7 7 0 0010.79 9.79z" />
+    </svg>
+  </button>
+  <app-bottom-player class="col-start-1 col-span-5 row-start-6"></app-bottom-player>
+</div>

Frontend/src/app/pages/home/home.component.ts

@@ -10,7 +10,7 @@ import {OnInit} from '@angular/core';
 import {AuthService} from '../../services/auth.service';
 import {Router} from '@angular/router';
 import { BottomPlayerComponent } from '../../shared/bottom-player/bottom-player.component';
-
+import { MoodsComponent } from '../../shared/moods/moods.component';
 @Component({
   selector: 'app-home',
   standalone: true,
@@ -25,6 +25,7 @@ import { BottomPlayerComponent } from '../../shared/bottom-player/bottom-player.
     NgIf,
     SideBarComponent,
     BottomPlayerComponent,
+    MoodsComponent
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'

Frontend/src/app/shared/moods/moods.component.html

@@ -0,0 +1,26 @@
+<mat-card class="p-2 text-black dark:text-white" style="width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;">
+    <mat-card-header class="text-xl font-bold mb-4">Favourite moods</mat-card-header>
+    <div style="display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;">
+        <div *ngFor="let mood of favouriteMoods" class="rounded-lg overflow-hidden" style="flex: 0 0 auto; width: 40vh; margin-right: 16px;">
+            <mat-card class="w-full h-full">
+                <img mat-card-image [src]="mood.image" [alt]="mood.name" class="w-full h-full object-cover" />
+                <mat-card-footer class="absolute bottom-2 left-2 text-white text-lg font-bold">{{mood.name}}</mat-card-footer>
+            </mat-card>
+        </div>
+    </div>
+    <mat-card-header class="text-xl font-bold mb-4">Recommended moods</mat-card-header>
+    <div style="display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;">
+        <div *ngFor="let mood of RecommendedMoods" class="rounded-lg overflow-hidden" style="flex: 0 0 auto; width: 40vh; margin-right: 16px;">
+            <mat-card class="w-full h-full">
+                <img mat-card-image [src]="mood.image" [alt]="mood.name" class="w-full h-full object-cover" />
+                <mat-card-footer class="absolute bottom-2 left-2 text-white text-lg font-bold">{{mood.name}}</mat-card-footer>
+            </mat-card>
+        </div>
+    </div>
+</mat-card>
+
+<style>
+    ::-webkit-scrollbar {
+        display: none;
+    }
+</style>

Frontend/src/app/shared/moods/moods.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MoodsComponent } from './moods.component';
+
+describe('MoodsComponent', () => {
+  let component: MoodsComponent;
+  let fixture: ComponentFixture<MoodsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MoodsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MoodsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/shared/moods/moods.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+import { NgClass, NgForOf, NgIf } from '@angular/common';
+import {MatGridListModule} from '@angular/material/grid-list';
+@Component({
+  selector: 'app-moods',
+  standalone: true,
+  imports: [MatGridListModule,MatCardModule,NgClass,NgForOf,NgIf],
+  templateUrl: './moods.component.html',
+  styleUrl: './moods.component.css'
+})
+export class MoodsComponent {
+  favouriteMoods = [
+    {
+      name: 'Confident',
+      image: '/assets/moods/Confident.jpg'
+    },
+    {
+      name: 'Chill',
+      image: '/assets/moods/chill.jpg'
+    },
+    {
+      name: 'Happy',
+      image: '/assets/moods/happy.jpg'
+    },
+    {
+      name: 'Melancholy',
+      image: '/assets/moods/Melancholy.png'
+    },
+    {
+      name: 'Nostalgic',
+      image: '/assets/moods/Nostalgic.jpg'
+    },
+    {
+      name: 'Unknows',
+      image: '/assets/moods/img6.jpg'
+    },
+  ];
+
+  RecommendedMoods = [
+    {
+      name: 'Melancholy',
+      image: '/assets/moods/Melancholy.png'
+    },
+    {
+      name: 'Nostalgic',
+      image: '/assets/moods/Nostalgic.jpg'
+    },
+    {
+      name: 'Unknows',
+      image: '/assets/moods/img6.jpg'
+    },
+    {
+      name: 'Confident',
+      image: '/assets/moods/Confident.jpg'
+    },
+    {
+      name: 'Chill',
+      image: '/assets/moods/chill.jpg'
+    },
+    {
+      name: 'Happy',
+      image: '/assets/moods/happy.jpg'
+    }
+  ];
+  }
+