From 054a7ddd136ee90382faa5631fbaf4683404505a Mon Sep 17 00:00:00 2001
From: I-Have-An-Issue <34550332+I-Have-An-Issue@users.noreply.github.com>
Date: Sun, 9 Oct 2022 02:41:35 -0400
Subject: [PATCH] Invites page

---
 src/routes/(app)/+layout.svelte          |  8 ++-
 src/routes/(app)/my/invites/+page.svelte | 64 ++++++++++++++----------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 5931d69..6837766 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -7,19 +7,17 @@
 		<a class="mr-7" href="/catalog">Catalog</a>
 		<a class="mr-7" href="/forums">Forums</a>
 		<input class="rounded px-2 border-2 border-grey-300 text-black flex-grow mr-10" type="text" name="search" id="search" placeholder="Search" />
-		<a class="mr-4 px-2 py-1 flex items-center rounded bg-gradient-to-tr from-blue-700 to-blue-600 outline outline-blue-800 outline-1 shadow-md hover:shadow-xl" href="/my/money">
+		<a class="mr-1 px-2 py-1 flex items-center rounded bg-gradient-to-tr from-blue-700 to-blue-600 outline outline-blue-800 outline-1 shadow-md hover:shadow-xl" href="/my/money">
 			<img class="h-6 mr-1.5" src="/img/rowbux.png" alt="" />
 			100
 		</a>
-		<p class="text-2xl mb-0.5">|</p>
-		<div class="ml-2 relative inline-block dropdown">
+		<div class="ml-1 relative inline-block dropdown">
 			<button class="hover:text-zinc-200" href="/my/profile"
-				>WWWWWWWWWWWWWWWW
+				>Only16Characters
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block">
 					<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
 				</svg>
 			</button>
-
 			<div class="absolute bg-white text-center text-black w-36 right-0 origin-top-right rounded border border-gray-300 divide-y shadow-lg hidden dropdown-content">
 				<div>
 					<a class="block px-4 py-0.5 text-gray-700" href="/my/profile">Profile</a>
diff --git a/src/routes/(app)/my/invites/+page.svelte b/src/routes/(app)/my/invites/+page.svelte
index 9efb968..a789cae 100644
--- a/src/routes/(app)/my/invites/+page.svelte
+++ b/src/routes/(app)/my/invites/+page.svelte
@@ -2,30 +2,40 @@
 	<title>Invites - Rowblox</title>
 </svelte:head>
 
-    <div class="d-flex justify-content-between">
-        <h1 class="text-4xl mt-32 text-bold font-bold">Invite Keys</h1>
-        <p>"keys can be created every 7 days. Creating a key costs 250 Rowbux."</p>
-        <button class=" text-white px-4 py-1 w-full rounded shadow-lg border-2 border-white bg-green-500 hover:bg-green-400">Create a Key</button>
-        <div> 
-        <table class="table-auto mx-auto text-semibold font-bold mt-4 text-1.5xl w-96 h-20 rounded shadow-lg border-2">
-            <thead>    
-              <tr class="divide-x">
-                <th>Key</th>
-                <th>Created</th>
-                <th>Uses</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="divide-x">
-                <td>Keytest1</td>
-                <td>10/8/22</td>
-                <td>100</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-    </div>
-    
-      
-
-
+<div class="d-flex justify-content-between">
+	<div class="flex place-content-between">
+		<div>
+			<h1 class="text-3xl text-bold font-bold">Invite Keys</h1>
+			<p>Invite Keys can be created every 7 days for 250 Rowbux each.</p>
+		</div>
+		<div class="flex flex-col">
+			<button class="my-auto px-3 py-1 rounded border-2 border-green-500 text-green-500 shadow-lg hover:bg-green-200">Create Invite Key</button>
+		</div>
+	</div>
+	<div>
+		<table class="table-auto text-center w-full border-2 border-gray-300 mt-2 divide-y">
+			<thead>
+				<tr class="divide-x">
+					<th>Invite Key</th>
+					<th>Claimed By</th>
+					<th>Created</th>
+					<th>Revoke</th>
+				</tr>
+			</thead>
+			<tbody class="divide-y">
+				<tr class="divide-x">
+					<td class="truncate">jahseh-45c61898-ddbb-414c-9cc2-4e6a35f164c8</td>
+					<td>Nobody</td>
+					<td>{new Date().toLocaleString()}</td>
+					<td><button class="my-1 px-6 py-1 rounded border-2 border-red-500 text-red-500 shadow-lg hover:bg-red-200">Revoke</button></td>
+				</tr>
+				<tr class="divide-x">
+					<td class="truncate">jahseh-67cb4676-071a-4160-8f18-af494ff15b80</td>
+					<td><a class="text-blue-500" href="/users/1">Rowblox</a></td>
+					<td>{new Date(1665297610952).toLocaleString()}</td>
+					<td><button class="my-1 px-6 py-1 rounded border-2 border-red-300 text-red-300 shadow-lg cursor-default disabled">Revoke</button></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>