This repository has no description
Something went wrong. Try again.
3.5 kB · 89 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990'use client'// src/components/ShareLinks.tsximport { useState } from 'react'
interface ShareLinksProps { title: string url: string}
const btnClass = 'inline-flex items-center justify-center w-[34px] h-[34px] rounded-sm border border-hair-2 text-ink-2 hover:text-ink hover:border-ink transition-colors'
export function ShareLinks({ title, url }: ShareLinksProps) { const [copied, setCopied] = useState(false)
const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(`${title} ${url}`)}` const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
async function handleCopy() { try { await navigator.clipboard.writeText(url) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch { // Clipboard write failed silently } }
return ( <div className="border-hair mt-8 border-t pt-5"> <div className="text-ink-3 mb-3 font-mono text-[10.5px] tracking-[0.18em] uppercase"> Share </div> <div className="flex gap-2"> {/* Bluesky */} <a className={btnClass} href={blueskyUrl} target="_blank" rel="noopener noreferrer" title="Share on Bluesky" aria-label="Share on Bluesky" > <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" /> </svg> </a>
{/* LinkedIn */} <a className={btnClass} href={linkedinUrl} target="_blank" rel="noopener noreferrer" title="Share on LinkedIn" aria-label="Share on LinkedIn" > <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8.06h4.56V23H.22V8.06zM8.16 8.06h4.37v2.04h.06c.61-1.15 2.1-2.37 4.33-2.37 4.63 0 5.48 3.05 5.48 7.02V23h-4.56v-6.65c0-1.59-.03-3.64-2.22-3.64-2.22 0-2.56 1.73-2.56 3.52V23H8.16V8.06z" /> </svg> </a>
{/* Copy link */} <button type="button" className={`cursor-pointer bg-transparent ${btnClass}${copied ? ' text-ink border-ink' : ''}`} title={copied ? 'Copied!' : 'Copy link'} aria-label={copied ? 'Copied!' : 'Copy link'} onClick={handleCopy} > <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /> </svg> </button> </div> </div> )}