48 lines
1.7 KiB
Plaintext
48 lines
1.7 KiB
Plaintext
component Link {
|
|
props {
|
|
size = "default"
|
|
color = "primary"
|
|
label = "Link"
|
|
href = "#"
|
|
target = ""
|
|
rel = ""
|
|
external = false
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<a
|
|
data-ui-component="Link"
|
|
href='{href}'
|
|
target='{target}'
|
|
rel='{external ? (rel || "noopener noreferrer") : rel}'
|
|
class='inline-flex min-w-0 items-center gap-1.5 rounded-md font-semibold underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
|
|
class:text-xs='size === "xs"'
|
|
class:text-sm='size === "sm" || size === "default"'
|
|
class:text-base='size === "md"'
|
|
class:text-lg='size === "lg"'
|
|
class:text-[var(--wire-color-primary)]='color === "primary"'
|
|
class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
|
|
class:text-[var(--wire-color-secondary)]='color === "secondary"'
|
|
class:hover:text-[var(--wire-color-secondary-hover)]='color === "secondary"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
class:text-[var(--wire-color-text)]='color === "neutral"'
|
|
class:hover:underline='external === false'
|
|
>
|
|
<span class="truncate">{label}</span>
|
|
|
|
{#if external}
|
|
<span
|
|
class="icon-[lucide--external-link] size-3.5 shrink-0"
|
|
aria-hidden="true"
|
|
></span>
|
|
{/if}
|
|
|
|
<slot></slot>
|
|
</a>
|
|
}
|
|
}
|