jank/jklink
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 1 Packages Wiki Activity Actions

feat: add Angular Material and refactor UI components

Browse source
This commit is contained in:
Jan K9f 2025-01-21 09:31:43 +01:00
commit 6317c97d96
Signed by: jank
GPG key ID: 50620ADD22CD330B
15 changed files with 194 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/app/create-link/create-link.component.html
View file

@ -1,29 +1,19 @@
<div class="h-full mx-auto container">
<div class="mx-auto container">
<app-navbar></app-navbar>
<div class="h-full overflow-x-auto pt-10">
<div class="mx-auto card bg-base-100 w-96 shadow-xl">
<div class="card-body">
<h2 class="card-title">Create link</h2>
@if (requestFailed) {
<div role="alert" class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Something went wrong</span>
</div>
}
<form [formGroup]="createLinkForm">
<input formControlName="name" type="text" placeholder="Name"
class="mb-3 input input-bordered w-full max-w-xs" />
<input formControlName="link" type="url" placeholder="Link" class="input input-bordered w-full max-w-xs" />
</form>
<div class="card-actions justify-end">
<button class="btn btn-primary" (click)="submit()">Create</button>
</div>
</div>
</div>
</div>
<button mat-flat-button class="mt-3" color="warn" (click)="back()">Back</button>
<mat-card class="mt-3 p-3" appearance="outlined">
<form class="flex flex-col" [formGroup]="createLinkForm">
<mat-form-field appearance="outline">
<mat-error>{{errorMessages['name']}}</mat-error>
<mat-label>Name</mat-label>
<input formControlName="name" matInput placeholder="My Awesome link">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-error>{{errorMessages['link']}}</mat-error>
<mat-label>Link</mat-label>
<input formControlName="link" matInput type="url" placeholder="https://kjan.de">
</mat-form-field>
<button mat-flat-button type="submit" (click)="submit()">Create</button>
</form>
</mat-card>
</div>