AI Agent
ae39f7961a
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m21s
Co-authored-by: Shaun Campbell <shaun@campbellwireless.net> Reviewed-on: #48 Co-authored-by: AI Agent <ai-agent@campbellwireless.net> Co-committed-by: AI Agent <ai-agent@campbellwireless.net>
67 lines
1.7 KiB
Svelte
67 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { base } from '$app/paths';
|
|
|
|
interface Props {
|
|
operatorName: string;
|
|
tourName?: string | null;
|
|
highlightColor?: string | null;
|
|
size?: 'sm' | 'md';
|
|
showName?: boolean;
|
|
}
|
|
|
|
let {
|
|
operatorName,
|
|
tourName = null,
|
|
highlightColor = null,
|
|
size = 'sm',
|
|
showName = true
|
|
}: Props = $props();
|
|
|
|
function logoSlug(name: string): string {
|
|
return name
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '_')
|
|
.replace(/^_|_$/g, '');
|
|
}
|
|
|
|
let logoVariant = $state<'square' | 'wide' | 'none'>('square');
|
|
|
|
const squareLogoUrl = $derived(
|
|
`${base}/package-tour-logos/${logoSlug(operatorName)}_square.svg`
|
|
);
|
|
const wideLogoUrl = $derived(
|
|
`${base}/package-tour-logos/${logoSlug(operatorName)}_wide.svg`
|
|
);
|
|
const logoUrl = $derived(
|
|
logoVariant === 'square' ? squareLogoUrl : logoVariant === 'wide' ? wideLogoUrl : null
|
|
);
|
|
|
|
const sizeClass = $derived(size === 'md' ? 'h-6 w-6' : 'h-5 w-5');
|
|
const textSizeClass = $derived(size === 'md' ? 'text-xs' : 'text-[10px]');
|
|
|
|
function handleLogoError() {
|
|
logoVariant = logoVariant === 'square' ? 'wide' : 'none';
|
|
}
|
|
</script>
|
|
|
|
<div class="flex items-center gap-2 text-xs text-gray-500">
|
|
{#if logoUrl}
|
|
<img
|
|
src={logoUrl}
|
|
alt={operatorName}
|
|
class="{sizeClass} rounded-md object-contain"
|
|
on:error={handleLogoError}
|
|
/>
|
|
{:else}
|
|
<span
|
|
class="{sizeClass} {textSizeClass} flex items-center justify-center rounded-md border border-gray-200 font-semibold"
|
|
style="background-color: {highlightColor ?? '#F3F4F6'}; color: {highlightColor ? '#111827' : '#6B7280'}"
|
|
>
|
|
{operatorName.slice(0, 1).toUpperCase()}
|
|
</span>
|
|
{/if}
|
|
{#if showName}
|
|
<span class="truncate">{operatorName}{tourName ? `: ${tourName}` : ''}</span>
|
|
{/if}
|
|
</div>
|