loco-admin-web/src/lib/components/tools/card/card.svelte

<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	import { resolve } from '$app/paths';

	import { GlassPane } from '$lib/components/common/glass-pane';
	import { Icon } from '$lib/components/common/icon';
	import { StatusBadge } from '$lib/components/common/status-badge';
	import { Tags } from '$lib/components/common/tags';
	import type { Tool } from '$lib/types/entities';

	let {
		tool,
		selectedTags,
		class: className = '',
		onselect,
	}: {
		tool: Tool;
		selectedTags?: Set<string>;
		class?: ClassValue;
		onselect?: () => void;
	} = $props();
</script>

{#snippet content()}
	<GlassPane class={['flex h-32 gap-4 overflow-hidden rounded-xl px-4 py-2', className]} reactive>
		<!-- icon -->
		<div class="flex shrink-0 items-center justify-center">
			<Icon icon={tool.icon} />
		</div>

		<div class="flex flex-1 flex-col gap-1 overflow-hidden">
			<!-- header: name + status badge -->
			<div class="flex items-center justify-between gap-2">
				<span class="truncate text-lg font-medium text-white/75 group-hover:text-white">
					{tool.name}
				</span>
				{#if tool.status}
					<StatusBadge class="shrink-0" status={tool.status} />
				{/if}
			</div>

			<!-- description -->
			{#if tool.description}
				<div class="line-clamp-2 text-sm text-white/50">
					{tool.description}
				</div>
			{:else}
				<div class="text-xs text-white/25">&lt;no description&gt;</div>
			{/if}

			<!-- tags -->
			<div class="mt-auto overflow-hidden">
				<Tags activeTags={selectedTags} tags={tool.tags} />
			</div>
		</div>
	</GlassPane>
{/snippet}

{#if onselect === undefined}
	<a class="group block" href={resolve('/workloads/tools/[id]', { id: tool.id })}>
		{@render content()}
	</a>
{:else}
	<div
		class="group block"
		role="button"
		tabindex="0"
		onclick={() => onselect()}
		onkeydown={(e) => e.key === 'Enter' && onselect()}
	>
		{@render content()}
	</div>
{/if}