dashboard draft

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

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>

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"

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">

src/routes/(app)/admin/+page.svelte

@@ -0,0 +1 @@
+adminnn

src/routes/(app)/dashboard/+page.server.js

@@ -1,3 +1,4 @@
+/** @type {import("@sveltejs/kit").Load} */
 export function load({ locals }) {
 	return { user: locals?.user };
 }

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>