From 18df4e785747e82244f3113dcd8aeb6743c7b171 Mon Sep 17 00:00:00 2001
From: LewBlu <lewis.blundell.development@gmail.com>
Date: Wed, 11 Jan 2023 20:08:49 +0000
Subject: [PATCH] Profile page created

---
 src/app/app-routing.module.ts             |  2 +
 src/app/app.module.ts                     |  4 +-
 src/app/profile/profile.component.css     |  5 +++
 src/app/profile/profile.component.html    | 45 +++++++++++++++++++++++
 src/app/profile/profile.component.spec.ts | 23 ++++++++++++
 src/app/profile/profile.component.ts      | 12 ++++++
 src/index.html                            |  2 +-
 src/styles.css                            |  4 ++
 8 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/app/profile/profile.component.css
 create mode 100644 src/app/profile/profile.component.html
 create mode 100644 src/app/profile/profile.component.spec.ts
 create mode 100644 src/app/profile/profile.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 883bf5c..828ec81 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CatchesComponent } from './catches/catches.component';
 import { MapComponent } from './map/map.component';
+import { ProfileComponent } from './profile/profile.component';
 
 const routes: Routes = [
 	{ path: 'map', component: MapComponent },
 	{ path: 'catches', component: CatchesComponent },
+	{ path: 'profile', component: ProfileComponent },
 	{ path: '**', redirectTo: '/catches' }
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1954c5c..433c2fa 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { MapComponent } from './map/map.component';
 import { CatchesComponent } from './catches/catches.component';
 import { CatchItemComponent } from './catches/catch-item/catch-item.component';
 import { MobileComponent } from './navigation/mobile/mobile.component';
+import { ProfileComponent } from './profile/profile.component';
 
 @NgModule({
 	declarations: [
@@ -17,7 +18,8 @@ import { MobileComponent } from './navigation/mobile/mobile.component';
 		MapComponent,
 		CatchesComponent,
 		CatchItemComponent,
-		MobileComponent
+		MobileComponent,
+		ProfileComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/src/app/profile/profile.component.css b/src/app/profile/profile.component.css
new file mode 100644
index 0000000..f4862e3
--- /dev/null
+++ b/src/app/profile/profile.component.css
@@ -0,0 +1,5 @@
+.avatar {
+	width: 150px;
+	height: 150px;
+	border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
new file mode 100644
index 0000000..3418a7d
--- /dev/null
+++ b/src/app/profile/profile.component.html
@@ -0,0 +1,45 @@
+<div class="container">
+	<div class="row mt-2">
+		<div class="col d-flex justify-content-end">
+			<a class="fs-3 text-success cursor-pointer" routerLink="settings"><fa-icon [icon]="faCog"></fa-icon></a>
+		</div>
+	</div>
+	<div class="row justify-content-center mt-3 g-0">
+		<img src="assets/profile_picture.JPEG" alt="" class="avatar">
+	</div>
+	<div class="row text-center my-3">
+		<h4>Lewis Blundell</h4>
+	</div>
+	<div class="row row-cols-2">
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body text-center">
+					Fish Caught
+					<p class="h3 text-center m-0">6</p>
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body text-center">
+					Personal Best
+					<p class="h3 text-center m-0">16lb 7oz</p>
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body">
+					This is some text within a card body.
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body">
+					This is some text within a card body.
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/app/profile/profile.component.spec.ts b/src/app/profile/profile.component.spec.ts
new file mode 100644
index 0000000..246039d
--- /dev/null
+++ b/src/app/profile/profile.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
new file mode 100644
index 0000000..4a710d0
--- /dev/null
+++ b/src/app/profile/profile.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+	selector: 'app-profile',
+	templateUrl: './profile.component.html',
+	styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent {
+	faCog = faCog;
+
+}
diff --git a/src/index.html b/src/index.html
index f2f023c..58e94ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
-<body>
+<body class="bg-light">
 	<app-root class="d-flex flex-column flex-grow-1"></app-root>
 </body>
 
diff --git a/src/styles.css b/src/styles.css
index 54de28c..eff4219 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,4 +13,8 @@ body {
 /* Additional margin-top styling (used for mobile nav) */
 .mb-6 {
 	margin-bottom: 4rem;
+}
+
+.cursor-pointer {
+	cursor: pointer;
 }
\ No newline at end of file