added membership options to shared library

projects/shared/src/lib/membership-options/membership-options.component.html

@@ -0,0 +1,6 @@
+<mat-button-toggle-group class="options-button-group" [vertical]="alignVertical">
+    <mat-button-toggle *ngFor="let membership of membershipTypes">
+        <div class="mat-h3">{{membership.name}}</div>
+        <div class="mat-body">{{membership.price}} USD</div>
+    </mat-button-toggle>
+</mat-button-toggle-group>

projects/shared/src/lib/membership-options/membership-options.component.scss

@@ -0,0 +1,25 @@
+.options-button-group {
+    border: none;
+    padding: 16px;
+
+    .mat-button-toggle {
+        background-color: #e6e8ea;
+        border: none;
+        border-radius: 4px;
+        margin: 8px;
+        padding: 8px
+    }
+
+    .mat-button-toggle-checked {
+        background-color: #22a7f0;
+
+        .mat-button-toggle-label-content {
+            color: white;
+        }
+    }
+}
+
+.mat-h3 {
+    font-weight: bold;
+    margin-bottom: 10px;
+}

projects/shared/src/lib/membership-options/membership-options.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
+import { Subscription } from 'rxjs';
+
+export interface MembershipType {
+    name: string;
+    price: string;
+    period: string;
+}
+
+const nonSupporter: MembershipType = {
+    name: 'NON-SUPPORTER',
+    price: '$0',
+    period: null
+};
+const monthlySupporter: MembershipType = {
+    name: 'MONTHLY SUPPORTER',
+    price: '$1.99',
+    period: 'month'
+};
+const yearlySupporter: MembershipType = {
+    name: 'YEARLY SUPPORTER',
+    price: '$19.99',
+    period: 'year'
+};
+
+@Component({
+    selector: 'shared-membership-options',
+    templateUrl: './membership-options.component.html',
+    styleUrls: ['./membership-options.component.scss']
+})
+export class MembershipOptionsComponent implements OnDestroy {
+    public alignVertical: boolean;
+    public membershipTypes: MembershipType[];
+    public mediaWatcher: Subscription;
+
+    constructor(public mediaObserver: MediaObserver) {
+        this.mediaWatcher = mediaObserver.media$.subscribe(
+            (change: MediaChange) => {
+                this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
+            }
+        );
+        this.membershipTypes = [yearlySupporter, monthlySupporter, nonSupporter];
+    }
+
+    ngOnDestroy(): void {
+      this.mediaWatcher.unsubscribe();
+    }
+
+}

projects/shared/src/lib/shared.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule, MatButtonToggleModule } from '@angular/material';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@@ -7,22 +8,27 @@ import { FacebookButtonComponent } from './facebook-button/facebook-button.compo
 import { GithubButtonComponent } from './github-button/github-button.component';
 import { GoogleButtonComponent } from './google-button/google-button.component';
 import { SharedComponent } from './shared.component';
+import { MembershipOptionsComponent } from './membership-options/membership-options.component';
 
 @NgModule({
   declarations: [
       FacebookButtonComponent,
       GithubButtonComponent,
       GoogleButtonComponent,
+      MembershipOptionsComponent,
       SharedComponent
   ],
   imports: [
+      CommonModule,
       FontAwesomeModule,
-      MatButtonModule
+      MatButtonModule,
+      MatButtonToggleModule
   ],
   exports: [
       FacebookButtonComponent,
       GithubButtonComponent,
       GoogleButtonComponent,
+      MembershipOptionsComponent,
       SharedComponent
   ]
 })