46 lines
1003 B
Svelte
46 lines
1003 B
Svelte
<!--
|
|
Component: Link
|
|
A styled link component based on the footer link design.
|
|
Supports optional icon snippet and standard anchor attributes.
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/lib';
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
|
|
|
interface Props extends HTMLAnchorAttributes {
|
|
/**
|
|
* Link content
|
|
*/
|
|
children?: Snippet;
|
|
/**
|
|
* Optional icon snippet
|
|
*/
|
|
icon?: Snippet;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
children,
|
|
icon,
|
|
class: className,
|
|
...rest
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<a
|
|
class={cn(
|
|
'group inline-flex items-center gap-1 text-2xs font-mono uppercase tracking-wider-mono',
|
|
'text-neutral-400 hover:text-brand transition-colors',
|
|
'bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 pointer-events-auto',
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{@render children?.()}
|
|
{@render icon?.()}
|
|
</a>
|