From 6c2f29afa6ea884f1e52684a8bbd5814b1812dd9 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 1 Jan 2024 07:07:55 +0100
Subject: [PATCH] Added services page with unfinished service card element

---
 src/lib/components/Card.svelte   | 24 ++++++++++++++++++++++++
 src/routes/Header.svelte         |  6 +++---
 src/routes/services/+page.svelte | 15 +++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index e69de29..a97ccf2 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -0,0 +1,24 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    let {service} = $props();
+</script>
+
+<div class="flex flex-col border-t-4 rounded-xl bg-black/55 border-maintenance p-4 gap-y-2 w-[30rem] h-48">
+    <div class="flex flex-row justify-between pb-4">
+        <div class="flex flex-row">
+            <h1>ICO</h1>
+            <a href={service.href} class="text-accent font-bold hover:text-primary">{service.name}</a>
+        </div>
+
+        <h1 class="border-b-2 rounded-md text-sm text-center w-16 text-maintenance border-maintenance">Loading</h1>
+    </div>
+    <p class="text-sm text-center text-accent text-wrap">{service.desc}</p>
+    <p class="text-sm text-center text-destructive">{service.warn}</p>
+    <div class="flex flex-row justify-around mt-auto">
+        <a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.href}>Open</a>
+        {#if service.extLink}
+            <a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.extLink}>Official Site</a>
+        {/if}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 06429f7..ce1b31f 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import {page} from "$app/stores";
-import { Button } from "$lib/components/ui/button"
+    import {page} from "$app/stores";
+    import { Button } from "$lib/components/ui/button";
 
-const button = "border-t-2 bg-black/50 hover:bg-black/70 hover:border-primary w-28";
+    const button = "border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28";
 
 </script>
 
diff --git a/src/routes/services/+page.svelte b/src/routes/services/+page.svelte
index e69de29..c30f5d0 100644
--- a/src/routes/services/+page.svelte
+++ b/src/routes/services/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import pages from '$lib/components/pages.json';
+    import Card from "$lib/components/Card.svelte";
+
+    const services = pages.services;
+</script>
+
+<title>Services</title>
+<meta name="description" content="Overview of Services running on neshweb.net">
+
+<div class="flex flex-row flex-wrap justify-center gap-10 p-8 overflow-auto h-full">
+    {#each services as service}
+        <Card {service} />
+    {/each}
+</div>
\ No newline at end of file