From 0f29bf1ad2ea2b8bb5026c3c06453a50ef61f0f8 Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Thu, 28 Apr 2022 17:28:59 +0200
Subject: [PATCH] disabled attribute

---
 src/lib/home/Card.svelte | 15 +++++++++++++--
 src/routes/index.svelte  |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/home/Card.svelte b/src/lib/home/Card.svelte
index e674749..2e7a755 100644
--- a/src/lib/home/Card.svelte
+++ b/src/lib/home/Card.svelte
@@ -2,16 +2,23 @@
 	export let buttonText;
 	export let buttonRedirect = "";
 	export let buttonHref;
+	export let disabled;
+
+	let classes = "z-10 flex flex-col group relative";
+
+	if(disabled) {
+		classes += " opacity-50";
+	}
 </script>
 
-<div class="z-10 flex flex-col group">
+<div class={classes}>
 	<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
 
 	<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
 		<slot />
 	</div>
 
-	{#if buttonText != null && buttonHref != null}
+	{#if buttonText != null && buttonHref != null && !disabled}
 		<a
 			href={buttonHref}
 			target={buttonRedirect}
@@ -22,4 +29,8 @@
 	{:else}
 		<span class="h-4 bg-opacity-50 group-hover:-translate-y-1 bg-white dark:bg-gray-900 rounded-b-xl duration-300"></span>
 	{/if}
+
+	{#if disabled}
+		<span class="absolute inset-0 flex justify-center items-center -rotate-45 text-red-500 font-bold text-6xl group-hover:-translate-y-1 duration-300">UNFINISHED</span>
+	{/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a625f65..f0a80b9 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -43,6 +43,7 @@
 				<Card
 					buttonHref="https://puppypride.social"
 					buttonText="🌐 Visit Puppy Pride"
+					disabled="true"
 				>
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"