Add SelectCountryComponent and adjust app routing
Created a new SelectCountryComponent to allow users to select their country. The new component includes buttons for each country and is displayed by default at the application start. The application routing was updated accordingly to redirect to the new component when no specific URL is entered or a redirection is required.
This commit is contained in:
parent
332f5bb604
commit
872f0f2383
6 changed files with 68 additions and 19 deletions
44
client/src/app/core/department/select-country.component.ts
Normal file
44
client/src/app/core/department/select-country.component.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {CommonModule, NgOptimizedImage} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [CommonModule, NgOptimizedImage],
|
||||
template: `
|
||||
<div class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]">
|
||||
<h1 class="font-bold text-amber-950 text-3xl hidden sm:block">Select Product</h1>
|
||||
<div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
|
||||
<button *ngFor="let country of countries"
|
||||
class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl">
|
||||
<img ngSrc="{{country.img}}" alt="{{country.country}}" width="200" height="225" priority="true"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
|
||||
<button *ngFor="let alpha of alphas"
|
||||
class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl">
|
||||
<img ngSrc="{{alpha.img}}" alt="{{alpha.alphaName}}" width="200" height="225" priority="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class SelectCountryComponent {
|
||||
countries: {country: string; img: string}[] = [{
|
||||
country: 'Thai',
|
||||
img: 'assets/departments/tha_plate.png'
|
||||
}, {
|
||||
country: 'Malaysia',
|
||||
img: 'assets/departments/mys_plate.png'
|
||||
}, {
|
||||
country: 'Australia',
|
||||
img: 'assets/departments/aus_plate.png'
|
||||
}]
|
||||
|
||||
alphas: {alphaName: string; img: string}[] = [
|
||||
{
|
||||
alphaName: 'ALPHA-3',
|
||||
img: 'assets/departments/alpha-3.png'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue