File size: 1,239 Bytes
73566f6 ed79486 73566f6 ed79486 73566f6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
@Component({
selector: 'app-auth-wrapper',
standalone: true,
imports: [CommonModule, SignInComponent, SignUpComponent],
template: `
<div class="card-swipe-container" [@cardSwipe]="cardState">
<app-sign-in
*ngIf="cardState === 'signin'"
[cardState]="cardState"
(switchToSignUp)="switchToSignUp()"
></app-sign-in>
<app-sign-up
*ngIf="cardState === 'signup'"
[cardState]="cardState"
(switchToSignIn)="switchToSignIn()"
></app-sign-up>
</div>
`,
styleUrls: ['./auth-wrapper.component.css'],
animations: [
trigger('cardSwipe', [
state('signup', style({ transform: 'translateX(0%)' })),
state('signin', style({ transform: 'translateX(-100%)' })),
transition('signup <=> signin', [
animate('400ms cubic-bezier(.25,.8,.25,1)')
]),
])
]
})
export class AuthWrapperComponent {
cardState: 'signup' | 'signin' = 'signin';
switchToSignUp() { this.cardState = 'signup'; }
switchToSignIn() { this.cardState = 'signin'; }
}
|