Trending section

base-client/src/app/components/bookmark/bookmark.component.html

@@ -0,0 +1,7 @@
+<div class="bookmark-icon-container">
+  <div class="bookmark-icon-background">
+  </div>
+  <img class="bookmark-icon"
+    [src]="isBookmarked ? './assets/icon-bookmark-full.svg' : './assets/icon-bookmark-empty.svg'"
+    alt="bookmark icon">
+</div>

base-client/src/app/components/bookmark/bookmark.component.scss

@@ -0,0 +1,33 @@
+@import "../styles/variables";
+
+.bookmark-icon-container {
+  width: 32px;
+  height: 32px;
+  right: 8px;
+  top: 8px;
+  position: absolute;
+
+  @media (min-width: $breakpoint-tablet) {
+    right: 12px;
+    top: 12px;
+  }
+}
+
+.bookmark-icon-background {
+  width: 32px;
+  height: 32px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  opacity: 0.50;
+  background: #10141E;
+  border-radius: 9999px;
+}
+
+.bookmark-icon {
+  width: 11.67px;
+  height: 14px;
+  left: 10px;
+  top: 9px;
+  position: absolute;
+}

base-client/src/app/components/bookmark/bookmark.component.spec.ts

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

base-client/src/app/components/bookmark/bookmark.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-bookmark',
+  standalone: true,
+  imports: [],
+  templateUrl: './bookmark.component.html',
+  styleUrl: './bookmark.component.scss'
+})
+export class BookmarkComponent {
+  @Input() isBookmarked: boolean = false
+}

base-client/src/app/components/navbar/navbar.component.scss

@@ -4,6 +4,7 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   background-color: $mango-semi-dark-blue;
+  margin-bottom: 24px;
 
   .app-navbar {
     align-content: center;

base-client/src/app/components/regular-section/regular-section.component.html

@@ -0,0 +1 @@
+<p>regular-section works!</p>

base-client/src/app/components/regular-section/regular-section.component.spec.ts

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

base-client/src/app/components/regular-section/regular-section.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-regular-section',
+  standalone: true,
+  imports: [],
+  templateUrl: './regular-section.component.html',
+  styleUrl: './regular-section.component.scss'
+})
+export class RegularSectionComponent {
+
+}

base-client/src/app/components/trending-card/trending-card.component.html

@@ -0,0 +1,18 @@
+<article class="trending-card">
+  <img class="trending-thumbnail" [src]="selectionData.thumbnail.trending?.small" [srcset]=""
+    [alt]="selectionData.title">
+  <app-bookmark [isBookmarked]="selectionData.isBookmarked" />
+  <div class="trending-card-data-container">
+    <div class="trending-card-data">
+      {{selectionData.year}}
+      <span>•</span>
+      <img class="category-icon"
+        [src]="selectionData.category === 'Movie' ? './assets/icon-category-movie.svg' : './assets/icon-category-tv.svg'"
+        [alt]="selectionData.category">
+      {{selectionData.category}}
+      <span>•</span>
+      {{selectionData.rating}}
+    </div>
+    <h3>{{selectionData.title}}</h3>
+  </div>
+</article>

base-client/src/app/components/trending-card/trending-card.component.scss

@@ -0,0 +1,67 @@
+@import "../styles/variables";
+
+.trending-card {
+  width: 240px;
+  height: 140px;
+  position: relative;
+  @media (min-width: $breakpoint-tablet) {
+      width: 470px;
+      height: 230px;
+    }
+}
+
+.trending-thumbnail {
+  width: 240px;
+  height: 140px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  @media (min-width: $breakpoint-tablet) {
+      width: 470px;
+      height: 230px;
+    }
+}
+
+.trending-card-data-container {
+  width: 240px;
+  height: 70px;
+  left: 0px;
+  top: 70px;
+  position: absolute;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 16px;
+  @media (min-width: $breakpoint-tablet) {
+      width: 470px;
+      height: 90px;
+      top: 140px;
+    }
+}
+
+.trending-card-data {
+  flex-direction: row;
+  gap: 8px;
+  display: flex;
+  font-size: 12px;
+  @media (min-width: $breakpoint-tablet) {
+      font-size: 15px;
+    }
+}
+
+.category-icon {
+  width: 12px;
+  height: 12px;
+  margin-top: 2px;
+}
+
+h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 4px;
+  @media (min-width: $breakpoint-tablet) {
+      font-size: 24px;
+  }
+}

base-client/src/app/components/trending-card/trending-card.component.spec.ts

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

base-client/src/app/components/trending-card/trending-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { SelectionData } from '../../interfaces/selection-data';
+import { BookmarkComponent } from "../bookmark/bookmark.component";
+
+@Component({
+  selector: 'app-trending-card',
+  standalone: true,
+  imports: [BookmarkComponent],
+  templateUrl: './trending-card.component.html',
+  styleUrl: './trending-card.component.scss'
+})
+export class TrendingCardComponent {
+  @Input() selectionData: SelectionData = { id: '', title: '', thumbnail: { trending: { small: '', large: '' }, regular: { small: '', medium: '', large: '' } }, category: '', rating: '', isBookmarked: false, isTrending: false, year: 0 }
+}

base-client/src/app/components/trending-section/trending-section.component.html

@@ -0,0 +1,8 @@
+<div class="trending-section">
+  <h2>Trending</h2>
+  <div class="selection-container">
+    @for(selectionData of trendingDataList; track selectionData.id) {
+              <app-trending-card [selectionData]="selectionData"></app-trending-card>
+            }
+  </div>
+</div>

base-client/src/app/components/trending-section/trending-section.component.scss

@@ -0,0 +1,28 @@
+@import "../styles/variables";
+
+.trending-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 16px;
+  width: screen;
+  overflow: scroll;
+  margin-bottom: 24px;
+}
+
+h2 {
+  font-size: 20px;
+  @media (min-width: $breakpoint-tablet) {
+    font-size: 32px;
+  }
+}
+
+.selection-container {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+    @media (min-width: $breakpoint-tablet) {
+      gap: 40px;
+    }
+}

base-client/src/app/components/trending-section/trending-section.component.spec.ts

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

base-client/src/app/components/trending-section/trending-section.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { SelectionsService } from '../../lib/selections.service';
+import { SelectionData } from '../../interfaces/selection-data';
+import { Subscription } from 'rxjs';
+import { TrendingCardComponent } from '../trending-card/trending-card.component';
+
+
+@Component({
+  selector: 'app-trending-section',
+  standalone: true,
+  imports: [TrendingCardComponent],
+  templateUrl: './trending-section.component.html',
+  styleUrl: './trending-section.component.scss'
+})
+export class TrendingSectionComponent {
+  trendingDataList: SelectionData[] = []
+  trendingSubscription?: Subscription
+  constructor(private selectionsService: SelectionsService) { }
+  trendingObservor = {
+    next: (data: SelectionData[]) => {
+      this.trendingDataList = data
+      console.log('next block', data)
+    },
+    error: (error: any) => {
+      console.log(error)
+    },
+    complete: () => {
+      console.log('stream completed')
+    }
+  }
+
+  ngOnInit(): void {
+    this.selectionsService.fetchTrendingSelections().subscribe(data => {
+      this.trendingDataList = data;
+    })
+  }
+
+  ngOnDestroy(): void {
+    if (this.trendingSubscription) {
+      this.trendingSubscription.unsubscribe()
+    }
+  }
+}