|
|
@ -4,7 +4,7 @@
|
|
|
|
export let buttonHref = null;
|
|
|
|
export let buttonHref = null;
|
|
|
|
export let disabled = false;
|
|
|
|
export let disabled = false;
|
|
|
|
|
|
|
|
|
|
|
|
let classes = "z-10 flex flex-col group relative overflow-hidden";
|
|
|
|
let classes = "z-10 flex flex-col group relative";
|
|
|
|
|
|
|
|
|
|
|
|
if(disabled) {
|
|
|
|
if(disabled) {
|
|
|
|
classes += " opacity-50";
|
|
|
|
classes += " opacity-50";
|
|
|
@ -14,6 +14,10 @@
|
|
|
|
<div class={classes}>
|
|
|
|
<div class={classes}>
|
|
|
|
<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
|
|
|
|
<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{#if disabled}
|
|
|
|
|
|
|
|
<span class="mt-10 flex justify-center text-center items-center text-black dark:text-white font-bold text-2xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span>
|
|
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
<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 />
|
|
|
|
<slot />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -29,8 +33,4 @@
|
|
|
|
{:else}
|
|
|
|
{: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>
|
|
|
|
<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}
|
|
|
|
|
|
|
|
|
|
|
|
{#if disabled}
|
|
|
|
|
|
|
|
<span class="absolute top-0 bottom-0 flex justify-center text-center items-center text-black dark:text-white -rotate-45 font-bold text-6xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span>
|
|
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|