Formatting

src/routes/details.svelte

@@ -1,36 +1,35 @@
 <script>
 	import { page } from '$app/stores';
-    import Apiclient from '$lib/Apiclient';
+	import Apiclient from '$lib/Apiclient';
 
 	let shortcode = $page.query.get('shortcode');
-    $: urlDetails = {
+	$: urlDetails = {
-        shortcode: "Loading...",
+		shortcode: 'Loading...',
-        url: "Loading...",
+		url: 'Loading...',
-        target: "Loading...",
+		target: 'Loading...',
-        visits: "Loading..."
+		visits: 'Loading...'
-    };
+	};
-    $: urlVisists = [];
+	$: urlVisists = [];
 
-    Apiclient.getUrlDetails(shortcode).then((res)=>{
+	Apiclient.getUrlDetails(shortcode).then((res) => {
-        urlDetails=res;
+		urlDetails = res;
-    });
+	});
-    let visitQuery = Apiclient.getUrlVisits(shortcode).then((res)=>{
+	let visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
-        urlVisists=res;
+		urlVisists = res;
-    });
+	});
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>
 
- 
 <div class="text-gray-800 dark:text-gray-100">
-    <h2>Shortcode:</h2> 
+	<span>Shortcode:</span>
-    {urlDetails.shortcode}
+	{urlDetails.shortcode} <br />
-    <h2>URL:</h2> 
+	<span>URL:</span>
-    {urlDetails.url}
+	{urlDetails.url} <br />
-    <h2>Target:</h2> 
+	<span>Target:</span>
-    {urlDetails.target}
+	{urlDetails.target} <br />
-    <h2>Visits:</h2> 
+	<span>Visits:</span>
-    {urlDetails.visits}
+	{urlDetails.visits}
 </div>
 
 <div class="rounded-xl">