106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
input,
|
|
output,
|
|
} from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatCardModule } from '@angular/material/card';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { RouterModule } from '@angular/router';
|
|
|
|
@Component({
|
|
selector: 'lib-user-card',
|
|
imports: [
|
|
CommonModule,
|
|
RouterModule,
|
|
MatCardModule,
|
|
MatButtonModule,
|
|
MatIconModule,
|
|
],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<mat-card class="user-card">
|
|
<button
|
|
mat-icon-button
|
|
color="warn"
|
|
class="delete-btn"
|
|
(click)="deleteUser.emit(user().id)"
|
|
>
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
<mat-card-header>
|
|
<mat-card-title>
|
|
<a [routerLink]="['/users', user().id]" class="user-link">{{
|
|
user().name
|
|
}}</a>
|
|
</mat-card-title>
|
|
<mat-card-subtitle>{{ user().email }}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="user-meta">
|
|
<span>
|
|
<mat-icon class="meta-icon">assignment</mat-icon>
|
|
{{ taskCount() }} Tasks
|
|
</span>
|
|
<span>
|
|
<mat-icon class="meta-icon">comment</mat-icon>
|
|
{{ commentCount() }} Comments
|
|
</span>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
`,
|
|
styles: [
|
|
`
|
|
.user-card {
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
|
|
transition: all 0.2s ease;
|
|
padding-bottom: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
.user-card:hover {
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-3px);
|
|
}
|
|
.user-link {
|
|
text-decoration: none;
|
|
color: #1976d2;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
}
|
|
.user-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
.user-meta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
}
|
|
.meta-icon {
|
|
vertical-align: middle;
|
|
margin-right: 0.2em;
|
|
color: #1976d2;
|
|
}
|
|
`,
|
|
],
|
|
})
|
|
export class UserCardComponent {
|
|
readonly user = input.required<{ id: number; name: string; email: string }>();
|
|
readonly taskCount = input<number>(0);
|
|
readonly commentCount = input<number>(0);
|
|
readonly deleteUser = output<number>();
|
|
}
|