From 0e7130256456c81f8f03b34212e9edfea119c3de Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Mon, 29 Apr 2024 08:39:25 -0400
Subject: [PATCH] dashboard draft

---
 docker-compose.yml                         | 17 +++++++++
 src/lib/components/Header.svelte           |  2 +-
 src/lib/components/Logo.svelte             |  2 +-
 src/routes/(app)/+layout.svelte            |  2 --
 src/routes/(app)/admin/+page.svelte        |  1 +
 src/routes/(app)/dashboard/+page.server.js |  1 +
 src/routes/(app)/dashboard/+page.svelte    | 42 +++++++++++++++++-----
 7 files changed, 54 insertions(+), 13 deletions(-)
 create mode 100644 docker-compose.yml

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..92fdf15
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,17 @@
+services:
+  mariadb:
+    container_name: 'file-uploader-db'
+    image: 'mariadb'
+    restart: always
+    environment:
+      MARIADB_DATABASE: file-uploader
+      MARIADB_ROOT_PASSWORD: file-uploader
+  file-uploader:
+    container_name: 'file-uploader'
+    image: file-uploader
+    build: .
+    restart: always
+    depends_on:
+      - mariadb
+    environment:
+      DATABASE_URL: mysql://root:file-uploader@mariadb:3306/file-uploader
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 6d6c6f0..ac5c2ff 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -15,7 +15,7 @@
 	<div class="flex my-auto space-x-6">
 		<a
 			href="/dashboard"
-			class="flex-none my-auto w-20 text-xl transition-all fill-black dark:fill-white hover:scale-105 focus:scale-105 active:scale-95"
+			class="flex-none my-auto w-20 fill-text text-xl transition-all hover:scale-105 focus:scale-105 active:scale-95"
 		>
 			<Logo></Logo>
 		</a>
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
index 935e5c3..315f72e 100644
--- a/src/lib/components/Logo.svelte
+++ b/src/lib/components/Logo.svelte
@@ -2,7 +2,7 @@
 	viewBox="0 0 1200 628"
 	version="1.1"
 	id="svg1"
-	class="transition-colors fill-text"
+	class="transition-colors fill-inherit"
 	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 	xmlns:
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 84fbaa3..af8d3d1 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -4,8 +4,6 @@
 
 	import Header from '$lib/components/Header.svelte';
 	import Footer from '$lib/components/Footer.svelte';
-
-	let show = false;
 </script>
 
 <div class="container my-2 w-full min-h-screen">
diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index e69de29..9ea8388 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -0,0 +1 @@
+adminnn
diff --git a/src/routes/(app)/dashboard/+page.server.js b/src/routes/(app)/dashboard/+page.server.js
index a55ea5d..60affd8 100644
--- a/src/routes/(app)/dashboard/+page.server.js
+++ b/src/routes/(app)/dashboard/+page.server.js
@@ -1,3 +1,4 @@
+/** @type {import("@sveltejs/kit").Load} */
 export function load({ locals }) {
 	return { user: locals?.user };
 }
diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index 015bebd..e63a0b0 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { Upload } from 'lucide-svelte';
+
 	import { user } from '$lib/stores';
 
 	import Button from '$lib/components/Inputs/Button.svelte';
@@ -9,12 +11,34 @@
 	user.set(data?.user);
 </script>
 
-<p>
-	<tt class="block whitespace-pre-wrap">
-		{JSON.stringify($user)}
-	</tt>
-</p>
-
-<Button click={() => {}} disabled={true}>
-	<ButtonText>help</ButtonText>
-</Button>
+<div class="w-96 h-[calc(100vh-4.5rem)] flex flex-col gap-2 mx-auto">
+	<div class="bg-crust w-full mx-auto mt-auto p-2 rounded-lg shadow-lg">
+		<button class="w-full outline-2 outline-dotted outline-surface2 rounded-sm bg-mantle h-36 flex">
+			<div class="m-auto text-lg flex text-surface2">
+				<Upload></Upload>
+			</div>
+		</button>
+	</div>
+	<div class="bg-crust w-full mx-auto mb-auto p-2 rounded-lg shadow-lg">
+		<table class="table-auto w-full mx-auto text-sm">
+			<tbody>
+				<tr>
+					<td class="font-bold">Registered Users</td>
+					<td class="text-right">100</td>
+				</tr>
+				<tr>
+					<td class="font-bold">Files Hosted</td>
+					<td class="text-right">100 Billion</td>
+				</tr>
+				<tr>
+					<td class="font-bold">File Storage</td>
+					<td class="text-right">1 TB</td>
+				</tr>
+				<tr>
+					<td class="font-bold">Max Upload Size</td>
+					<td class="text-right">100 MB</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>