MetaDisplay.svelte
<script type="ts">
import type {LangMetaRow} from './utils';
export let meta: LangMetaRow;
import Badge from './Badge.svelte';
import {badges} from './utils';
</script>
<div class="border-b-slate-300 border-b mb-2">
<!-- Paper -->
{#if meta.Paper && meta.Paper !== 'N/A'}
<div class="flex flex-col mb-2">
<span class="text-xs font-bold">Described in:</span>
{#if meta['Paper Link']}
<a class="text-sky-600 visited:text-sky-600 underline" href={meta['Paper Link']}>"{meta.Paper}"</a>
{:else}
<span class="text-sm">"{meta.Paper}"</span>
{/if}
</div>
{/if}
<!-- Domain -->
<div class="mb-2">
{#if meta.Description}
<span class="text-xs font-bold">Description:</span>
{/if}
<div class="text-sm">
{#if meta.Description}
{meta.Description}
{/if}
{#if meta.Link && meta.Link !== 'N/A' && meta.Link.startsWith('http')}
Find out more <a class="text-sky-600 visited:text-sky-600 underline" href={meta['Link']}>here.</a>
{/if}
{#if meta['harvest URL']}
Examples gathered from {#if meta['harvest URL'].startsWith('http')}
<a class="text-sky-600 visited:text-sky-600 underline" href={meta['harvest URL']}>here.</a>
{:else}
{meta['harvest URL']}.
{/if}
{#if meta.License && meta.License !== 'None'}
License:
{#if meta.License.startsWith('http')}
<a class="text-sky-600 visited:text-sky-600 underline" href={meta.License}>See license here</a>
{:else}
{meta.License}
{/if}
{/if}
{/if}
</div>
</div>
<div class="flex flex-wrap mb-2">
{#each badges as badge}
<Badge badgeType={badge} badgeValue={meta[badge]} />
{/each}
</div>
</div>