web/SectionHeading: reusable component for linkable section headings

web/src/components/misc/SectionHeading.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { t } from "$lib/i18n/translations";
+    import { copyURL } from "$lib/download";
+
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    export let title: string;
+    export let sectionId: string;
+    export let beta = false;
+
+    let copied = false;
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
+</script>
+
+<div class="heading-container">
+    <h3 class="content-title">{title}</h3>
+    {#if beta}
+        <div class="beta-label">{$t("general.beta")}</div>
+    {/if}
+    <button
+        class="link-copy"
+        aria-label={copied ? $t("button.copied") : $t("button.copy.section")}
+        on:click={() => {
+            copied = true;
+            copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
+        }}
+    >
+        <CopyIcon check={copied} />
+    </button>
+</div>
+
+<style>
+    .heading-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 6px;
+        justify-content: start;
+        align-items: center;
+        box-shadow: none;
+    }
+
+    .link-copy {
+        background: transparent;
+        padding: 2px;
+        box-shadow: none;
+        border-radius: 5px;
+        transition: opacity 0.1s;
+    }
+
+    .link-copy :global(.copy-animation) {
+        width: 17px;
+        height: 17px;
+        opacity: 0.7;
+    }
+
+    .link-copy :global(.copy-animation *) {
+        width: 17px;
+        height: 17px;
+    }
+
+    .link-copy :global(.copy-animation):hover {
+        opacity: 1;
+    }
+
+    .beta-label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        padding: 0 5px;
+        background: var(--secondary);
+        color: var(--primary);
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 2;
+        text-transform: uppercase;
+    }
+
+    @media (hover: hover) {
+        .link-copy:not(:focus-visible) {
+            opacity: 0;
+        }
+
+        .heading-container:hover .link-copy {
+            opacity: 1;
+        }
+    }
+</style>