SocialShare

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<SocialShare
  title="Share this page"
  description="description"
  url="url"
  shareText="shareText"
  centered="false"
/>

Legacy mount name: data-component="SocialShare".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/SocialShare.wrn

component SocialShare {
    props {
        class: string = ""
        title = "Share this page"
        description = ""

        url = ""
        shareText = ""

        centered = false
        compact = false
        showTitle = true
        showCopy = true

        networks = []
    }

    state copied = false

    view {
        <aside
            aria-labelledby="social-share-title"
            class="w-full {class}"
        >
        <div
                class=" relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.03] "
            >
        <!-- Subtle background -->
        <div
                    aria-hidden="true"
                    class="pointer-events-none absolute inset-0 overflow-hidden"
                >
        <div class="absolute -right-16 -top-20 h-40 w-40 rounded-full bg-indigo-200/25 blur-3xl dark:bg-indigo-500/10" >
        </div>
        <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20" >
        </div>
        </div>
        <div
                    class="relative"
                    class:p-4="compact"
                    class:sm:p-5="compact"
                    class:p-5="!compact"
                    class:sm:p-6="!compact"
                >
        <div
                        class="gap-4"
                        class:flex="centered"
                        class:flex-col="centered"
                        class:items-center="centered"
                        class:text-center="centered"
                        class:flex="!centered"
                        class:flex-col="!centered"
                        class:sm:flex-row="!centered"
                        class:sm:items-center="!centered"
                        class:sm:justify-between="!centered"
                    >
        <!-- Heading -->
        <div
                            class="min-w-0"
                            class:hidden="!showTitle"
                        >
        <h2
                                id="social-share-title"
                                class="font-bold tracking-tight text-slate-950 dark:text-white"
                                class:text-sm="compact"
                                class:text-base="!compact"
                            >
                                {title}
                            </h2>
        <p
                                class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
                                class:hidden="description === '' || compact"
                            >
                                {description}
                            </p>
        </div>
        <!-- Share buttons -->
        <div
                            class="flex flex-wrap items-center gap-2"
                            class:justify-center="centered"
                            class:justify-start="!centered"
                        >
                            {#each networks.slice(0, 5) as network}
                            <a
                                href="{network.href}"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="Share on {network.label}"
                                title="Share on {network.label}"
                                class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
                                class:h-9="compact"
                                class:w-9="compact"
                                class:h-10="!compact"
                                class:px-3="!compact"
                            >
        <span class="{network.iconClass} h-4 w-4" aria-hidden="true" >
        </span>
        <span class:hidden="compact">
                                    {network.label}
                                </span>
        </a>
                            {/each}

                            <!-- Copy link -->
        <button
                                type="button"
                                @click=" navigator.clipboard.writeText(url); copied = true; "
                                aria-label="{copied ? 'Link copied' : 'Copy page link'}"
                                class=" group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 "
                                class:hidden="!showCopy"
                                class:h-9="compact"
                                class:w-9="compact"
                                class:h-10="!compact"
                                class:px-3="!compact"
                            >
        <span class="icon-[lucide--copy] h-4 w-4" class:hidden="copied" aria-hidden="true" >
        </span>
        <span class="icon-[lucide--check] h-4 w-4" class:hidden="!copied" aria-hidden="true" >
        </span>
        <span class:hidden="compact">
                                    {copied ? 'Copied' : 'Copy link'}
                                </span>
        </button>
        </div>
        </div>
        <!-- Copy feedback -->
        <div
                        role="status"
                        aria-live="polite"
                        class="mt-3 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20"
                        class:hidden="!copied"
                        class:text-center="centered"
                    >
                        Page link copied to your clipboard.
                    </div>
        </div>
        </div>
        </aside>
    }
}