81 lines
1.9 KiB
Svelte
81 lines
1.9 KiB
Svelte
<script lang="ts" module>
|
|
import type { Component } from 'svelte';
|
|
|
|
export interface NavigationCardProps {
|
|
href: string;
|
|
icon: Component<{ class?: string }>;
|
|
title: string;
|
|
description: string;
|
|
disabled?: boolean;
|
|
class?: string;
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { cn } from '$lib/utils';
|
|
|
|
let {
|
|
href,
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
disabled = false,
|
|
class: className
|
|
}: NavigationCardProps = $props();
|
|
</script>
|
|
|
|
{#if disabled}
|
|
<div
|
|
class={cn(
|
|
'flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
|
|
'cursor-not-allowed opacity-50',
|
|
className
|
|
)}
|
|
>
|
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted">
|
|
<Icon class="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xl font-semibold">{title}</span>
|
|
<span class="text-sm text-muted-foreground">{description}</span>
|
|
</div>
|
|
<span
|
|
class="ml-auto rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground"
|
|
>
|
|
Coming soon
|
|
</span>
|
|
</div>
|
|
{:else}
|
|
<a
|
|
{href}
|
|
class={cn(
|
|
'group flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
|
|
'shadow-sm transition-all duration-200',
|
|
'hover:shadow-lg hover:border-primary/20',
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 transition-colors group-hover:bg-primary/20"
|
|
>
|
|
<Icon class="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xl font-semibold">{title}</span>
|
|
<span class="text-sm text-muted-foreground">{description}</span>
|
|
</div>
|
|
<svg
|
|
class="ml-auto h-5 w-5 text-muted-foreground transition-transform group-hover:translate-x-1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
</a>
|
|
{/if}
|