feature: removed angular materials and implemented new deposit modal

This commit is contained in:
Lea 2025-02-26 12:41:35 +01:00
commit 604d593fdc
10 changed files with 66 additions and 48 deletions

View file

@ -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">

View file

@ -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;
}
}