Rossy franca

.gitignore

@@ -40,3 +40,6 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+#Environment files
+./src/environments/

src/app/app-routing.module.ts

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

src/app/app.module.ts

@@ -8,6 +8,9 @@ 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';
+import { HttpClientModule } from '@angular/common/http';
+import { PaginationButtonComponent } from './components/pagination-button/pagination-button.component';
 
 @NgModule({
   declarations: [
@@ -16,11 +19,15 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin
     CardComponent,
     MenuBarComponent,
     CardLabelComponent,
-    CardPricingComponent
+    CardPricingComponent,
+    MenuBarItemComponent,
+    PaginationButtonComponent
+
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/card/card-label/card-label.component.css

@@ -15,4 +15,17 @@
 	font-weight: bold;
 	height: 40px;
 	padding: 0px 50px;
+	animation: pulsar 2s infinite;
 }
+
+@keyframes pulsar{
+	0% {
+        transform: scale(1); 
+      }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1); 
+      }
+}

src/app/components/card/card-label/card-label.component.html

@@ -1,5 +1,5 @@
 <div class="card-label__container">
 	<div class="card-label__content">
-		<p>{{gameLabel}}</p>
+		<p>{{gamePlatform}}</p>
 	</div>
 </div>

src/app/components/card/card-label/card-label.component.ts

@@ -8,7 +8,7 @@ import { Component, Input, OnInit } from '@angular/core';
 export class CardLabelComponent implements OnInit {
 
 	@Input()
-	gameLabel:string=""
+	gamePlatform:string=""
 
   constructor() { }
 

src/app/components/card/card-pricing/card-pricing.component.html

@@ -5,10 +5,10 @@ <h3>Play it Now!</h3>
 	<div class="card-pricing__value">
 		<div class="card-pricing__value__console">
 			<span>|</span>
-			<p>{{gameType}}</p>
+			<p>{{gameTitle}}</p>
 		</div>
 		<div class="card-pricing__value__money">
-			<p class="game-price">{{gamePrice}}</p>
+			<p class="game-price">{{gameGenre}}</p>
 		</div>
 	</div>
 </div>

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"
+	gameTitle:string ="Digital PS4"
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	gameGenre:string = "R$ 399,90"
   constructor() { }
 
   ngOnInit(): void {

src/app/components/card/card.component.css

@@ -1,18 +1,20 @@
 .card__container{
+	background-color: rgba(0, 0, 0, 0.589);
 	position: relative;
 	border:3px solid #3E4357;
 	border-radius: 10px;
 	width: 350px;
-	height: 500px;
+	height: 400px;
 
 	display: flex;
 	overflow: hidden;
 	margin-top: 10px;
 }
 
 .card__img{
-	min-width: 100%;
-	min-height: 100%;
+	width: 100%;
+	height: 100%; 
+	object-fit: contain; 
 	transition: transform .8s;
 }
 

src/app/components/card/card.component.html

@@ -1,17 +1,17 @@
-<a href="#" class="card__container">
+<a href="gameId" class="card__container">
 	<img
 		class="card__img"
-		[src]=[gameCover]
+		[src]=[gameThumb]
 		alt=""
 		srcset=""
 	>
 	<app-card-label
-		gameLabel="{{gameLabel}}"
+		gamePlatform="{{gamePlatform}}"
 	>
 	</app-card-label>
 	<app-card-pricing
-		gameType="{{gameType}}"
-		gamePrice="{{gamePrice}}"
+		gameTitle="{{gameTitle}}"
+		gameGenre="{{gameGenre}}"
 	>
 	</app-card-pricing>
 </a>

src/app/components/card/card.component.ts

@@ -8,13 +8,15 @@ import { Component, Input, OnInit } from '@angular/core';
 export class CardComponent implements OnInit {
 
 	@Input()
-	gameCover:string = ""
+	gameThumb:string = ""
 	@Input()
-	gameLabel:string=""
+	gamePlatform:string=""
 	@Input()
-	gameType:string ="XPTO | PS4"
+	gameTitle:string ="XPTO | PS4"
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	gameGenre:string = "R$ 399,90"
+	@Input()
+	gameId:string = '';
 
   constructor() { }
 

src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css

@@ -0,0 +1,28 @@
+.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;
+}

src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html

@@ -0,0 +1,7 @@
+<div class="menu-bar__item">
+    <ul>
+        <li><a href="">YOUTUBE</a></li>
+        <li><a href="https://www.linkedin.com/in/rossywan-franca/">LINKEDIN</a></li>
+        <li><a href="https://github.com/RossyFranca">GITHUB</a></li>
+    </ul>
+</div>

src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.spec.ts

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

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 {
+  }
+
+}

src/app/components/menu-bar/menu-bar.component.css

@@ -1,44 +1,29 @@
-.menu-bar__container{
-	display: flex;
-	flex-direction: row;
-	position: fixed;
-	z-index: 999;
-	background-color: #ffffff;
-	width: 100%;
-	height: 40px;
-	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
-}
+.menu-bar__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center; /* Centraliza verticalmente */
+    position: fixed;
+    z-index: 999;
+    background-color: #ffffff;
+    width: 100%;
+    height: 40px;
+    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+  }
+
+  .menu-bar__logo {
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+
+  }
+  .menu-bar__logo > a > img:hover{
+    transition: transform .8s;
+    transform: scale(1.1);
+  }
 
-.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;
-}
+  .menu-bar-item__content {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+  }
+

src/app/components/menu-bar/menu-bar.component.html

@@ -1,18 +1,14 @@
 <div class="menu-bar__container">
 	<div class="menu-bar__logo">
-		<img
+		<a href="https://store.playstation.com/pt-br/pages/latest">
+			<img
 			src="assets/ps-logo.png"
 			alt="playstation logo"
 			srcset=""
 			width="140px"
 			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>
+			>
+		</a>
 	</div>
+	<app-menu-bar-item class="menu-bar-item__content"></app-menu-bar-item>
 </div>

src/app/components/pagination-button/pagination-button.component.css

@@ -0,0 +1,21 @@
+:host {
+    background-color: #007BFF;
+    margin-right: 10px; 
+    padding: 10px 10px; 
+    width: 100px;
+    height: 30px; 
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    color: #fff; 
+    border: none; 
+    border-radius: 5px; 
+
+  }
+
+  .pagination-button-large{
+
+    cursor: pointer; 
+    pointer-events: auto;
+  }

src/app/components/pagination-button/pagination-button.component.html

@@ -0,0 +1 @@
+<button class="pagination-button-large" (click)="onPageButtonClick()">{{label}}</button>

src/app/components/pagination-button/pagination-button.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-pagination-button',
+  templateUrl: './pagination-button.component.html',
+  styleUrls: ['./pagination-button.component.css']
+})
+export class PaginationButtonComponent  {
+  @Input() pageNumber: number = 0; // Propriedade de entrada para o número da página
+  @Output() pageChanged = new EventEmitter<number>(); // Evento que emite o número da página quando o botão é clicado
+  @Input() label:string ='';
+
+  constructor() { }
+
+  onPageButtonClick() {
+    // Emita o evento com o número da página quando o botão é clicado
+    this.pageChanged.emit(this.pageNumber);
+  }
+}