diff --git a/src/app/e-services/e-services.component.html b/src/app/e-services/e-services.component.html index 5a4f256..86364bd 100644 --- a/src/app/e-services/e-services.component.html +++ b/src/app/e-services/e-services.component.html @@ -61,4 +61,8 @@ + + +
+
\ No newline at end of file diff --git a/src/app/e-services/e-services.component.ts b/src/app/e-services/e-services.component.ts index 093d6d8..ecd0879 100644 --- a/src/app/e-services/e-services.component.ts +++ b/src/app/e-services/e-services.component.ts @@ -1,15 +1,38 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-e-services', - templateUrl: './e-services.component.html', - styleUrls: ['./e-services.component.scss'] + selector: 'app-e-services', + templateUrl: './e-services.component.html', + styleUrls: ['./e-services.component.scss'] }) export class EServicesComponent implements OnInit { - constructor() { } + keyValues = [{ + key: 'Receipt Number', + value: 'ACRA38293', + }, { + key: 'ARN', + value: 'ARN2021110294038', + }, { + key: 'EP Reference No.', + value: '20910038829384470' + }, { + key: 'Tax ID', + value: 'M9-0C038921', + }, { + key: 'Paid By', + value: 'KOH YA TING', + }, { + key: 'Payment Date', + value: '06/11/2021 11:28:01' + }, { + key: 'Paid Via', + value: 'Net Banking', + }]; - ngOnInit(): void { - } + constructor() { } + + ngOnInit(): void { + } } diff --git a/src/app/key-value-holder/key-value-holder.component.html b/src/app/key-value-holder/key-value-holder.component.html index dddaf4e..4f50a0e 100644 --- a/src/app/key-value-holder/key-value-holder.component.html +++ b/src/app/key-value-holder/key-value-holder.component.html @@ -1 +1,6 @@ -

key-value-holder works!

+ \ No newline at end of file diff --git a/src/app/key-value-holder/key-value-holder.component.scss b/src/app/key-value-holder/key-value-holder.component.scss index e69de29..f041ca2 100644 --- a/src/app/key-value-holder/key-value-holder.component.scss +++ b/src/app/key-value-holder/key-value-holder.component.scss @@ -0,0 +1,32 @@ +.bill-breakup { + display: grid; + grid-template-columns: 1fr 1fr; + list-style: none; + + li { + margin: 1.8rem; + width: 100%; + } + + label { + display: block; + color: var(--dark-grey); + font-size: 1.6rem; + filter: brightness(80%); + } + + .value { + display: block; + color: var(--dark-grey); + opacity: 0.8; + font-size: 1.6rem; + letter-spacing: 0.5px; + line-height: 1.6; + margin-top: 1rem; + + &.active { + color: var(--highlight); + font-weight: normal; + } + } +} \ No newline at end of file diff --git a/src/app/key-value-holder/key-value-holder.component.ts b/src/app/key-value-holder/key-value-holder.component.ts index 9b7bea8..ed13b83 100644 --- a/src/app/key-value-holder/key-value-holder.component.ts +++ b/src/app/key-value-holder/key-value-holder.component.ts @@ -1,15 +1,19 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; @Component({ - selector: 'app-key-value-holder', - templateUrl: './key-value-holder.component.html', - styleUrls: ['./key-value-holder.component.scss'] + selector: 'app-key-value-holder', + templateUrl: './key-value-holder.component.html', + styleUrls: ['./key-value-holder.component.scss'] }) export class KeyValueHolderComponent implements OnInit { + @Input() keyValues: Array<{ + key: string, + value: string, + }> = []; - constructor() { } + constructor() { } - ngOnInit(): void { - } + ngOnInit(): void { + } }