feature: removed angular materials and implemented new deposit modal
This commit is contained in:
parent
0100df89f5
commit
604d593fdc
10 changed files with 66 additions and 48 deletions
|
@ -22,7 +22,7 @@
|
|||
<div class="slider-grid">
|
||||
<div class="card group" *ngFor="let game of featuredGames">
|
||||
<div class="relative">
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
>
|
||||
|
@ -41,7 +41,7 @@
|
|||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<div class="card group" *ngFor="let game of allGames">
|
||||
<div class="relative">
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
>
|
||||
|
@ -56,10 +56,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Konto</h3>
|
||||
<div class="space-y-4">
|
||||
<button class="button-base w-full py-2" (click)="openDepositModal()">
|
||||
Einzahlen
|
||||
</button>
|
||||
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
|
||||
Transaktionen
|
||||
</button>
|
||||
|
@ -69,6 +73,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
|
||||
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
|
||||
<div class="space-y-3">
|
||||
|
|
|
@ -1,17 +1,20 @@
|
|||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
|
||||
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
|
||||
import { CurrencyPipe, NgFor } from '@angular/common';
|
||||
import { Game } from '../../model/Game';
|
||||
import { Transaction } from '../../model/Transaction';
|
||||
import {DepositComponent} from "../deposit/deposit.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage',
|
||||
standalone: true,
|
||||
imports: [NavbarComponent, CurrencyPipe, NgFor],
|
||||
imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
|
||||
templateUrl: './home.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export default class HomeComponent {
|
||||
isDepositModalOpen = false;
|
||||
|
||||
featuredGames: Game[] = [
|
||||
{
|
||||
id: '1',
|
||||
|
@ -67,4 +70,11 @@ export default class HomeComponent {
|
|||
date: '2024-03-18',
|
||||
},
|
||||
];
|
||||
|
||||
openDepositModal(){
|
||||
this.isDepositModalOpen = true;
|
||||
}
|
||||
closeDepositModal(){
|
||||
this.isDepositModalOpen = false;
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue