src/lib/components/partner/ModelCard.svelte

<script lang="ts">
	import type { PartnerModel } from '$lib/data/partners';
	import Icon from '../Icon.svelte';

	interface Props {
		m: PartnerModel;
	}
	let { m }: Props = $props();

	const pct = $derived(m.size !== undefined ? Math.max(4, Math.round((m.size / 32) * 100)) : 0);
</script>

<div class="pcard">
	<div class="pcard__head">
		<div class="pcard__name">{m.name}</div>
		{#if m.url}
			<a
				href={m.url}
				class="resitem__glyph"
				style="width:34px;height:34px"
				aria-label="Open model"
				target="_blank"
				rel="noreferrer"
			>
				<Icon name="arrow" size={16} stroke="var(--paccent)" />
			</a>
		{/if}
	</div>
	<p style="color:var(--ink-2);font-size:14.5px;margin-top:10px;text-wrap:pretty">{m.desc}</p>
	<ul class="tags">
		{#each m.tags as t (t)}<li class="tag">{t}</li>{/each}
	</ul>
	{#if m.size !== undefined}
		<div class="sizebar">
			<div class="sizebar__track"><div class="sizebar__fill" style="width:{pct}%"></div></div>
			<div class="sizebar__lbl"><span>{m.size}B parameters</span><span>32B cap</span></div>
		</div>
	{/if}
</div>