chat-ui / src /lib /components /ModelCardMetadata.svelte
coyotte508's picture
coyotte508 HF staff
🩹
676f857
raw history blame
No virus
1.36 kB
<script lang="ts">
import CarbonEarth from "~icons/carbon/earth";
import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
import type { Model } from "$lib/types/Model";
export let model: Pick<Model, "name" | "datasetName" | "websiteUrl">;
export let variant: "light" | "dark" = "light";
</script>
<div
class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm
{variant === 'dark'
? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
>
<a
href="https://huggingface.co/{model.name}"
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
Model
<div class="max-sm:hidden">&nbsp;page</div></a
>
{#if model.datasetName}
<a
href="https://huggingface.co/datasets/{model.datasetName}"
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
Dataset
<div class="max-sm:hidden">&nbsp;page</div></a
>
{/if}
{#if model.websiteUrl}
<a
href={model.websiteUrl}
target="_blank"
class="ml-auto flex items-center hover:underline"
rel="noreferrer"
>
<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
Website
</a>
{/if}
</div>