From b656a4ca498d77eee9fdf100fd80b17d68b96770 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 19 Nov 2023 21:03:41 +0800
Subject: [PATCH] update shortener card

---
 src/routes/(app)/links/+page.svelte | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/routes/(app)/links/+page.svelte b/src/routes/(app)/links/+page.svelte
index f3c357a..e0af2e4 100644
--- a/src/routes/(app)/links/+page.svelte
+++ b/src/routes/(app)/links/+page.svelte
@@ -9,12 +9,12 @@
 	import { Label } from '$lib/components/ui/label'
 	import {
 		BarChart,
-		Link2,
+		ExternalLink,
 		Loader2,
 		MoreVertical,
 		PlusCircle,
 	} from 'lucide-svelte'
-	import { invalidateAll } from '$app/navigation'
+	import { goto, invalidateAll } from '$app/navigation'
 
 	export let data: PageData
 
@@ -110,7 +110,7 @@
 <Separator />
 
 {#if data.shorteners.length > 0}
-	<div class="flex flex-col gap-4 p-4">
+	<div class="flex flex-col gap-4 overflow-scroll p-4">
 		{#each data.shorteners as shortener}
 			<Card.Root class="w-full max-w-[500px]">
 				<Card.Header>
@@ -124,20 +124,21 @@
 							class="hover:underline">
 							{data.shortener_url + '/' + shortener.code}
 						</a>
-						<Link2 />
+						<ExternalLink size={16} />
 					</Card.Title>
 					<Card.Description>{shortener.link}</Card.Description>
 				</Card.Header>
 				<Card.Content>
 					<div class="flex items-center justify-between">
 						<div class="flex gap-2">
-							<div
-								class="flex items-center justify-center gap-1 rounded bg-secondary px-3 py-1 text-sm">
+							<Button
+								class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm"
+								on:click={() => goto(`/links/${shortener.code}`)}>
 								<BarChart size={20} />
 								<div>
 									{shortener.visitor.length} visits
 								</div>
-							</div>
+							</Button>
 						</div>
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger>