From 18c458d91ca5e7187ffb3615fca8970fc6e4ca65 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 6 Jun 2022 15:48:53 +0200
Subject: feat: More work on portal

---
 apps/web-shared/src/components/link-card.svelte | 47 +++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 apps/web-shared/src/components/link-card.svelte

(limited to 'apps/web-shared/src/components/link-card.svelte')

diff --git a/apps/web-shared/src/components/link-card.svelte b/apps/web-shared/src/components/link-card.svelte
new file mode 100644
index 0000000..0c15a53
--- /dev/null
+++ b/apps/web-shared/src/components/link-card.svelte
@@ -0,0 +1,47 @@
+<script>
+	export let text = "View";
+	export let name;
+	export let description = null;
+	export let href = null;
+	export let target;
+	export let title = null;
+</script>
+
+<a class="link-card flex flex-column bg-light cursor-pointer radius-md {$$restProps.class??''}"
+   {href}
+   {target}
+   {title}
+   on:click
+   aria-label="Link label">
+    <div class="padding-md">
+        <div class="flex flex-wrap gap-xs items-center">
+            <slot name="icon"></slot>
+            <div class="line-height-xs">
+                <p class="text-lg font-semibold color-contrast-higher">{name}</p>
+                {#if description}
+                    <p class="color-contrast-low margin-top-xxxs">{description}</p>
+                {/if}
+            </div>
+        </div>
+    </div>
+    <div class="link-card__footer margin-top-auto border-top border-contrast-lower">
+        <p class="text-sm">{text}</p>
+        <div>
+            <svg class="icon icon--sm"
+                 viewBox="0 0 24 24">
+                <g fill="none"
+                   stroke="currentColor"
+                   stroke-linecap="round"
+                   stroke-linejoin="round"
+                   stroke-width="2">
+                    <line x1="3"
+                          y1="12"
+                          x2="21"
+                          y2="12"/>
+                    <polyline points="15 6 21 12 15 18"/>
+                </g>
+            </svg>
+        </div>
+    </div>
+</a>
+
-- 
cgit v1.3