Added link management page

This commit is contained in:
Nicolai Ort 2021-08-16 16:18:30 +02:00
parent 1c43011842
commit a7e4a98b2b
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
3 changed files with 150 additions and 63 deletions

View File

@ -1,3 +1,7 @@
<script>
export let logged_in = true;
</script>
<div
class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600"
>
@ -27,7 +31,7 @@
<nav>
<a
class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200"
href="#"
href="/"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -44,6 +48,7 @@
<hr class="my-6 dark:border-gray-600" />
{#if logged_in}
<a
class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
href="#"
@ -68,7 +73,7 @@
<a
class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
href="#"
href="/links"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -111,6 +116,50 @@
<span class="mx-4 font-medium">Settings</span>
</a>
<a
class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
<span class="mx-4 font-medium">Logout</span>
</a>
{:else}
<a
class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
<span class="mx-4 font-medium">Login</span>
</a>
{/if}
</nav>
<div class="flex items-center px-4 -mx-2">

View File

@ -1,7 +1,6 @@
<script>
import '../app.postcss';
import Sidebar from '$lib/Sidebar.svelte';
import Statscard from '$lib/Statscard.svelte';
</script>
<div style="min-height: 640px;" class="bg-white dark:bg-gray-800">

39
src/routes/links.svelte Normal file
View File

@ -0,0 +1,39 @@
<script>
import Statscard from '$lib/Statscard.svelte';
</script>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Manage all links</h2>
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
<Statscard title="Links created">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
/>
</svg>
</Statscard>
<Statscard title="Visits">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
/>
</svg>
</Statscard>
</div>