felipeAguiarCode · gemaquejr · Sep 16, 2023
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { CardComponent } from './components/card/card.component';
 import { MenuBarComponent } from './components/menu-bar/menu-bar.component';
 import { CardLabelComponent } from './components/card/card-label/card-label.component';
 import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component';
+import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-bar-item.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin
     CardComponent,
     MenuBarComponent,
     CardLabelComponent,
-    CardPricingComponent
+    CardPricingComponent,
+    MenuBarItemComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts
@@ -8,9 +8,9 @@ import { Component, Input, OnInit } from '@angular/core';
 export class CardPricingComponent implements OnInit {
 
 	@Input()
-	gameType:string ="Digital PS4"
+	gameType:string =""
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	gamePrice:string = ""
   constructor() { }
 
   ngOnInit(): void {

diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 
+import { GameService } from 'src/app/services/game.service';
+
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
@@ -12,13 +14,29 @@ export class CardComponent implements OnInit {
 	@Input()
 	gameLabel:string=""
 	@Input()
-	gameType:string ="XPTO | PS4"
+	gameType:string =""
+	@Input()
+	gamePrice:string = ""
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	id:string = ""
 
-  constructor() { }
+
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
+	this.setValuesToComponent(this.id);
   }
+	setValuesToComponent(id: string) {
+		const result = this.gameService.getDataById(id);
+
+		if (result) {
+			this.gameCover = result.gameCover;
+			this.gameLabel = result.gameLabel;
+			this.gameType = result.gameType;
+			this.gamePrice = result.gamePrice
+		  } else {
+			console.error(`Artigo com ID ${id} não encontrado.`);
+		  }
+	}
 
 }
diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css
@@ -0,0 +1,29 @@
+.menu-bar__item{
+    display: flex;
+    margin-right: 600px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu-bar__item > ul{
+      display: flex;
+      list-style-type: none;
+  }
+
+  .menu-bar__item > ul > li {
+      padding: 5px;
+      margin-right: 15px;
+  }
+
+  .menu-bar__item > ul > li > a {
+      text-decoration: none;
+      padding: 5px;
+      color: rgb(7, 7, 7);
+      font-family: 'Segoe UI';
+  }
+
+  .menu-bar__item > ul > li > a:hover {
+      color: blue;
+      font-weight: 600;
+  }
+
diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html
@@ -0,0 +1,9 @@
+<div class="menu-bar__item">
+    <ul>
+        <li><a href="https://portfolio-gemaquejr.netlify.app/" target="_blank">PORTIFÓLIO</a></li>
+        <li><span>•</span></li>
+        <li><a href="https://www.linkedin.com/in/gemaquejr/" target="_blank">LINKEDIN</a></li>
+        <li><span>•</span></li>
+        <li><a href="https://github.com/gemaquejr" target="_blank">GITHUB</a></li>
+    </ul>
+</div>
diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-bar-item',
+  templateUrl: './menu-bar-item.component.html',
+  styleUrls: ['./menu-bar-item.component.css']
+})
+export class MenuBarItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css
@@ -7,38 +7,13 @@
 	width: 100%;
 	height: 40px;
 	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
+
+	align-items: center;
+	justify-content: space-between;
 }
 
 .menu-bar__logo{
   margin-left: 30px;
   display: flex;
   align-items: center;
-}
-
-.menu-bar__item{
-  display: flex;
-  margin:auto;
-  align-items: center;
-}
-
-.menu-bar__item > ul{
-	display: flex;
-	list-style-type: none;
-}
-
-.menu-bar__item > ul > li {
-	padding: 5px;
-	margin-right: 15px;
-}
-
-.menu-bar__item > ul > li > a {
-	text-decoration: none;
-	padding: 5px;
-	color: rgb(7, 7, 7);
-	font-family: 'Segoe UI';
-}
-
-.menu-bar__item > ul > li > a:hover {
-	color: blue;
-	font-weight: 600;
-}
+}
diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html
@@ -8,11 +8,5 @@
 			height="32px"
 		>
 	</div>
-	<div class="menu-bar__item">
-		<ul>
-			<li><a href="#">YOUTUBE</a></li>
-			<li><a href="#">LINKEDIN</a></li>
-			<li><a href="#">GITHUB</a></li>
-		</ul>
-	</div>
+	<app-menu-bar-item></app-menu-bar-item>
 </div>
diff --git a/src/app/data/dataFake.ts b/src/app/data/dataFake.ts
@@ -0,0 +1,45 @@
+export const dataFake = [
+    {
+        "id": "1",
+        "gameCover": "assets/ac-cover.jpg", 
+        "gameLabel": "BEST OF YEAR",
+        "gameType": "DISC | PS5",
+        "gamePrice": "R$ 369,99"
+    },
+    {
+        "id": "2",
+        "gameCover": "assets/bt-1.jpg", 
+        "gameLabel": "DIGITAL",
+        "gameType": "DIGITAL | PS4",
+        "gamePrice": "R$ 129,99"
+
+    },
+    {
+        "id": "3",
+        "gameCover": "assets/bt-4.jpg", 
+        "gameLabel": "EXCLUSIVE",
+        "gameType": "DISC | PS5",
+        "gamePrice": "R$ 269,99"
+    },
+    {
+        "id": "4",
+        "gameCover": "assets/bt-5.jpg", 
+        "gameLabel": "CLASSIC",
+        "gameType": "DISC | PS5",
+        "gamePrice": "R$ 289,99"
+    },
+    {
+        "id": "5",
+        "gameCover": "assets/bt-bad-company-2.jpg", 
+        "gameLabel": "CLASSIC",
+        "gameType": "DISC | PS3 PS4",
+        "gamePrice": "R$ 199,99"
+    },
+    {
+        "id": "6",
+        "gameCover": "assets/bt-hardline.jpg", 
+        "gameLabel": "NEW",
+        "gameType": "DIGITAL | PS3 PS4 PS5",
+        "gamePrice": "R$ 369,99"
+    }    
+]
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -1,30 +1,18 @@
 <div class="home__container">
 	<app-card
-		gameCover="assets/bt-1.jpg"
-		gameLabel="DIGITAL"
-		gameType="DIGITAL | PS4"
-		gamePrice="R$ 129,99"
+		id="1"
 	>
 	</app-card>
 	<app-card
-		gameCover="assets/bt-4.jpg"
-		gameLabel="EXCLUSIVE"
-		gameType="DISC | PS5"
-		gamePrice="R$ 269,99"
+		id="2"
 	>
 	</app-card>
 	<app-card
-		gameCover="assets/ac-cover.jpg"
-		gameLabel="BEST OF YEAR"
-		gameType="DIGITAL | PS5"
-		gamePrice="R$ 369,99"
+		id="3"
 		>
 	</app-card>
 	<app-card
-		gameCover="assets/bt-hardline.jpg"
-		gameLabel="NEW"
-		gameType="DIGITAL | PS3 PS4 PS5"
-		gamePrice="R$ 369,99"
+		id="4"
 	>
 	</app-card>
 </div>

diff --git a/src/app/services/game.service.spec.ts b/src/app/services/game.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GameService } from './game.service';
+
+describe('GameService', () => {
+  let service: GameService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GameService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/game.service.ts b/src/app/services/game.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { dataFake } from '../data/dataFake';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GameService {
+  getDataById(id: string) {
+    return dataFake.find(article => article.id === id);
+  }
+
+  constructor() { }
+}