2023-07-09 22:18:06 +01:00
|
|
|
<script lang="ts">
|
2023-07-09 23:21:21 +01:00
|
|
|
import { topics } from '$src/content/utility/anchor-registry';
|
2023-07-09 22:18:06 +01:00
|
|
|
import { Hashtag } from '@inqling/svelte-icons/heroicon-24-outline';
|
|
|
|
|
|
|
|
|
|
export let value: string;
|
|
|
|
|
$: id = topics.slugify(value || '');
|
|
|
|
|
topics.add(value);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<a href="/#{id}" class="group relative -ml-[1em] hover:text-black">
|
2023-07-09 23:21:21 +01:00
|
|
|
<Hashtag
|
|
|
|
|
class="h-[1em] w-[1em] -translate-x-1 text-mono-300 group-hover:text-primary-600"
|
|
|
|
|
/><span class="underline decoration-primary-50/0 decoration-4 group-hover:decoration-primary-500"
|
2023-07-09 22:18:06 +01:00
|
|
|
>{value}</span
|
|
|
|
|
>
|
|
|
|
|
<span class="pointer-events-none absolute -top-10 h-px w-px" {id} />
|
|
|
|
|
</a>
|
