cobalt/web/src/components/misc/SectionHeading.svelte

<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;
    export let copyData = "";

    const sectionURL = `${$page.url.origin}${$page.url.pathname}#${sectionId}`;

    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${copyData ? "" : ".section"}`)}
        on:click={() => {
            copied = true;
            copyURL(copyData || sectionURL);
        }}
    >
        <CopyIcon check={copied} regularIcon={!!copyData} />
    </button>
</div>

<style>
    .heading-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        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.2s;
        opacity: 0.7;
    }

    .link-copy:focus-visible {
        opacity: 1;
    }

    .link-copy :global(.copy-animation) {
        width: 17px;
        height: 17px;
    }

    .link-copy :global(.copy-animation *) {
        width: 17px;
        height: 17px;
    }

    .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: 1.9;
        text-transform: uppercase;
    }

    @media (hover: hover) {
        .heading-container:hover .link-copy {
            opacity: 1;
        }
    }
</style>