From dca561535c0000334df4873ee1c1398b97fc87cd Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 11 Mar 2024 20:42:54 +0800
Subject: [PATCH] update dashboard UI

---
 frontend/src/routes/(app)/+page.svelte | 47 ++++++++++++++------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte
index 8db66a5..c2861c9 100644
--- a/frontend/src/routes/(app)/+page.svelte
+++ b/frontend/src/routes/(app)/+page.svelte
@@ -3,32 +3,35 @@
 	import * as Card from '$lib/components/ui/card'
 	import { Button } from '$lib/components/ui/button'
 	import { Separator } from '$lib/components/ui/separator'
-	import { BarChart } from 'lucide-svelte'
+	import { BarChart, ExternalLink } from 'lucide-svelte'
 
 	export let data: PageData
 </script>
 
-<div class="flex min-h-[80px] items-center justify-between p-4">
-	<div class="text-3xl font-bold">Dashboard</div>
+<div class="flex flex-col gap-4 px-10 py-8">
+	<h2 class="text-2xl font-bold tracking-tight">Projects</h2>
+	<Separator class="" />
 </div>
-<Separator />
 
-<div class="flex flex-wrap gap-4 p-4">
-	<Card.Root class="w-[500px]">
-		<Card.Header>
-			<Card.Title>Projects</Card.Title>
-			<Card.Description>Projects</Card.Description>
-		</Card.Header>
-		<Card.Content>
-			<div class="flex w-full flex-col items-stretch gap-2">
-				{#each data.projects as project}
-					<div class="flex w-full items-center justify-between gap-2">
+<div class="flex w-full flex-col items-stretch gap-2 px-6">
+	{#each data.projects as project}
+		<a href={'/links?project=' + project.uuid}>
+			<Card.Root
+				class="w-full max-w-[500px] hover:cursor-pointer hover:bg-secondary">
+				<Card.Header>
+					<Card.Title class="flex items-center gap-2">
+						{project.name}
+					</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<div class="flex w-full gap-4">
 						<Button
-							href={'/links?project=' + project.uuid}
-							class="w-3/4">
-							{project.name}
+							class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
+							<ExternalLink size={20} />
+							{project.shortener.length}
+							Shorteners
 						</Button>
-						<div class="flex gap-2">
+						<div class="flex items-center gap-2">
 							<BarChart />
 							{project.shortener.reduce(
 								(curr, shortener) => shortener.visitor.length + curr,
@@ -36,8 +39,8 @@
 							)} visits
 						</div>
 					</div>
-				{/each}
-			</div>
-		</Card.Content>
-	</Card.Root>
+				</Card.Content>
+			</Card.Root>
+		</a>
+	{/each}
 </div>