added product-item-description ui

src/app/components/navbar/navbar.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-    <span>Shelf</span>
+    <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">
         <mat-icon>shopping_cart</mat-icon>

src/app/components/navbar/navbar.component.scss

@@ -1,3 +1,8 @@
 .nav-spacer {
     flex: 1 1 auto;
+}
+
+a {
+    text-decoration: none;
+    color: #fff;
 }

src/app/components/product-item-details/product-item-details.component.html

@@ -0,0 +1,11 @@
+<app-navbar></app-navbar>
+<div class="details-container">
+    <div class="details-img">
+        <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="card-img">
+    </div>
+    <div class="details-info">
+        <label class="info-tilte">Title</label>
+        <label>Price</label>
+        <label class="info-description">Description</label>
+    </div>
+</div>

src/app/components/product-item-details/product-item-details.component.scss

@@ -0,0 +1,52 @@
+.details-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 10%;
+    
+}
+
+.details-img {
+    width: 25%;
+    padding-right: 10%;
+}
+
+.details-info {
+    display: flex;
+    flex-direction: column;
+    padding: 2%;
+    padding-top: 5%;
+    width: 30%;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-tilte {
+    font-size: 4vh;
+    padding-bottom: 5%;
+}
+
+.info-description {
+    padding-top: 5%;
+}
+
+img {
+    border-radius: 10px;
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    width: 100%;
+    height: auto;
+  }
+  
+  .select-input {
+    width: 108px; 
+    margin-bottom: 8px;
+  }
+  
+  .detail-item {
+    margin-left: 128px;
+    margin-right: 128px;
+  }
+  
+  .back-link {
+    margin-top: 8px;
+  }

src/app/components/product-item-details/product-item-details.component.spec.ts

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

src/app/components/product-item-details/product-item-details.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { Product } from '../../models/product'
+import { HttpService } from 'src/app/services/http.service';
+
+@Component({
+  selector: 'app-product-item-details',
+  templateUrl: './product-item-details.component.html',
+  styleUrls: ['./product-item-details.component.scss']
+})
+export class ProductItemDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -10,7 +10,7 @@
                 <span>{{product.price}} $</span>
             </div>
             <div class="card-buttons">
-                <button mat-raised-button color="primary">Details</button>
+                <button mat-raised-button color="primary" routerLink="/product/{{product.id}}">Details</button>
                 <button mat-raised-button color="primary">Add to cart</button>
             </div>
         </div>

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

@@ -17,7 +17,6 @@
     .card-img {
         max-width: 100%;
         height: auto;
-        background-color: red;
     }
 }