feat: add basic representation of mock products

Author: gultyayev

src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ProductsComponent } from './products/products.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: ProductsComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1 +1,3 @@
 <app-header></app-header>
+
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -10,6 +10,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { ProductsModule } from './products/products.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent, HeaderComponent],
@@ -22,6 +24,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatIconModule,
     MatMenuModule,
     MatTooltipModule,
+    ProductsModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/products/product-item/product-item.component.html

@@ -0,0 +1,27 @@
+<mat-card>
+  <div mat-card-image class="img-container">
+    <div class="img-container__inner">
+      <img src="https://source.unsplash.com/random?sig={{ index }}" alt="" />
+    </div>
+  </div>
+
+  <header>
+    <mat-card-title>
+      {{ product.title }}
+    </mat-card-title>
+  </header>
+
+  <mat-card-content>
+    <p>{{ product.price | number: "1.2-2" | currency }}</p>
+  </mat-card-content>
+
+  <mat-card-actions>
+    <button
+      color="accent"
+      matTooltip="Add {{ product.title }} to cart"
+      mat-icon-button
+    >
+      <mat-icon>shopping_cart</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

src/app/products/product-item/product-item.component.scss

@@ -0,0 +1,19 @@
+.img-container {
+  padding-top: 50%;
+  position: relative;
+
+  &__inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    object-position: center center;
+  }
+}

src/app/products/product-item/product-item.component.spec.ts

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

src/app/products/product-item/product-item.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { Product } from '../product.interface';
+
+@Component({
+  selector: 'app-product-item',
+  templateUrl: './product-item.component.html',
+  styleUrls: ['./product-item.component.scss'],
+})
+export class ProductItemComponent {
+  @Input() product!: Product;
+  @Input() index!: number;
+}

src/app/products/product.interface.ts

@@ -0,0 +1,7 @@
+export interface Product {
+  count: number;
+  description: string;
+  id: string;
+  price: number;
+  title: string;
+}

src/app/products/products.component.html

@@ -0,0 +1,8 @@
+<main class="container">
+  <app-product-item
+    *ngFor="let product of products$ | async; let i = index"
+    [product]="product"
+    [index]="i"
+  >
+  </app-product-item>
+</main>

src/app/products/products.component.scss

@@ -0,0 +1,23 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
+
+.container {
+  --gap: 10px;
+
+  display: grid;
+  grid-template-columns: 1fr;
+
+  grid-gap: var(--gap);
+  padding: var(--gap);
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr;
+    --gap: 20px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: 1fr 1fr 1fr;
+    --gap: 30px;
+  }
+}