update dashboard UI

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>