From 8f5e8832887b64d5b4f13a2f713a1ac95682bd27 Mon Sep 17 00:00:00 2001
From: rotimi_best <best@classroomio.com>
Date: Tue, 4 May 2021 16:36:05 +0300
Subject: [PATCH] Add profile page

---
 src/routes/_layout.svelte | 24 ++++++++++-----------
 src/routes/profile.svelte | 44 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 150df213..dd45e198 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -8,18 +8,6 @@
   export let segment;
 </script>
 
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
-
 <style>
   main {
     background-color: white;
@@ -33,3 +21,15 @@
     text-decoration: underline;
   }
 </style>
+
+<Tailwindcss />
+
+<!-- <Nav {segment} /> -->
+
+<main class="flex max-w-screen-xl">
+  <LeftNav {segment} />
+  <slot />
+  <SideBar />
+</main>
+
+<Footer />
diff --git a/src/routes/profile.svelte b/src/routes/profile.svelte
index 9d3f5493..c31f33a2 100644
--- a/src/routes/profile.svelte
+++ b/src/routes/profile.svelte
@@ -1,8 +1,46 @@
+<script>
+  let photos = [];
+</script>
+
+<style>
+  .root {
+    max-width: 600px;
+    margin: 20px auto;
+    border-left: 1px solid #eaecef;
+    border-right: 1px solid #eaecef;
+    text-align: center;
+    padding: 5px;
+  }
+
+  figure {
+    margin-bottom: 10px;
+  }
+  img {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+    border-radius: 50%;
+  }
+</style>
 
 <svelte:head>
-	<title>Profile</title>
+  <title>Profile</title>
 </svelte:head>
 
-<div class="">
-  <h2>Profile page here</h2>
+<div class="root">
+  <figure>
+    <img
+      src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
+      alt="Elon musk" />
+    <figcaption>Elon musk</figcaption>
+  </figure>
+  <p>
+    NASA has selected Starship to land the first astronauts on the lunar surface
+    since the Apollo program! We are humbled to help @NASAArtemis usher in a new
+    era of human space exploration → http://go.nasa.gov/3tur510
+  </p>
+  <button
+    class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
+    Connect
+  </button>
 </div>