diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4146f1f..a887534 100644
--- 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
index 5dc831e..5bf9313 100644
--- 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
index d2c9e49..7ad8f3a 100644
--- 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
new file mode 100644
index 0000000..46399ba
--- /dev/null
+++ 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;
+ }
+
\ No newline at end of file
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
new file mode 100644
index 0000000..1cf4d07
--- /dev/null
+++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html
@@ -0,0 +1,9 @@
+
\ No newline at end of file
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
new file mode 100644
index 0000000..dcd6e22
--- /dev/null
+++ 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
index b90bbc7..d8f7a72 100644
--- 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;
-}
+}
\ No newline at end of file
diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html
index 44067d8..1c59c80 100644
--- 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"
>
-
+
diff --git a/src/app/data/dataFake.ts b/src/app/data/dataFake.ts
new file mode 100644
index 0000000..808afe0
--- /dev/null
+++ 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"
+ }
+]
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 4613fb7..858b447 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,30 +1,18 @@
diff --git a/src/app/services/game.service.spec.ts b/src/app/services/game.service.spec.ts
new file mode 100644
index 0000000..fb5f120
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c9633f5
--- /dev/null
+++ 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() { }
+}