Created Membership-card Component

libs/ui/src/lib/membership-card/index.ts

@@ -0,0 +1 @@
+export * from './membership-card.module';

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -0,0 +1,17 @@
+<div
+  class="d-flex flex-column justify-content-between px-3 py-4 bg-dark card-item"
+>
+  <div class="d-flex justify-content-end mr-2">
+    <gf-logo></gf-logo>
+  </div>
+  <div class="d-flex justify-content-between">
+    <div class="px-3">
+      <p class="card-item-heading">Card Holder</p>
+      <p class="card-item-name">{{ name }}</p>
+    </div>
+    <div class="px-3">
+      <p class="card-item-heading">Expires</p>
+      <p class="card-item-name">{{ expiresAt | date: 'MM/yy' }}</p>
+    </div>
+  </div>
+</div>

libs/ui/src/lib/membership-card/membership-card.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+
+  .card-item {
+    max-width: 430px;
+    height: 270px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 15px;
+  }
+  .card-item-heading {
+    opacity: 0.7;
+    font-size: 13px;
+    margin-bottom: 5px;
+  }
+  .card-item-name {
+    font-size: 18px;
+    line-height: 1;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    margin-bottom: 3px;
+  }
+}

libs/ui/src/lib/membership-card/membership-card.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'gf-membership-card',
+    styleUrls: ['./membership-card.component.scss'],
+    templateUrl: './membership-card.component.html'
+})
+export class MembershipCardComponent {
+    @Input() public expiresAt: Date;
+    @Input() public name: string;
+}

libs/ui/src/lib/membership-card/membership-card.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { MembershipCardComponent } from './membership-card.component';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
+
+@NgModule({
+    declarations: [MembershipCardComponent],
+    exports: [MembershipCardComponent],
+    imports: [CommonModule, GfLogoModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GFMembershipCardModule { }