Bookmark Button

'use client'

import { useEffect, useState } from 'react'
import './bookmark-button.css'

export interface BookmarkButtonProps {
  saved?: boolean
  defaultSaved?: boolean
  collection?: string
  onSavedChange?: (saved: boolean) => void
  fill?: 'dark' | 'light'
  className?: string
}

/** Save toggle with a filling ribbon. */
export function BookmarkButton({ saved, defaultSaved = false, collection, onSavedChange, fill = 'dark', className }: BookmarkButtonProps) {
  const [inner, setInner] = useState(defaultSaved)
  const on = saved ?? inner
  const [note, setNote] = useState(false)
  useEffect(() => { if (!note) return; const t = setTimeout(() => setNote(false), 3500); return () => clearTimeout(t) }, [note, on])
  const set = (n: boolean) => { setInner(n); onSavedChange?.(n); setNote(n && Boolean(collection)) }
  const d = 'M4 2.5h10v15l-5-3.6-5 3.6z'
  return (
    <div className={['sd-bkm', className].filter(Boolean).join(' ')} data-fill={fill}>
      <button type="button" className="sd-bkm__b" aria-pressed={on} onClick={() => set(!on)}>
        <svg className="sd-bkm__ico" viewBox="0 0 18 20" aria-hidden><path className="f" d={d} /><path className="o" d={d} /></svg>
        {on ? 'Saved' : 'Save'}
      </button>
      <div role="status" style={{ minHeight: 20 }}>
        {note && <span className="sd-bkm__note">Saved to <b>{collection}</b><button type="button" onClick={() => set(false)}>Undo</button></span>}
      </div>
    </div>
  )
}

.sd-bkm { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-bkm[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-bkm button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-bkm :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-bkm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-bkm { display: grid; justify-items: center; gap: 12px; }
.sd-bkm__b { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: 14px; transition: transform 150ms, background-color 200ms; }
.sd-bkm__b:hover { background: var(--soft) !important; }
.sd-bkm__b:active { transform: scale(0.95); }
.sd-bkm__ico { width: 18px; height: 20px; overflow: visible; }
.sd-bkm__ico .o { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.sd-bkm__ico .f { fill: currentColor; clip-path: inset(0 0 100% 0); transition: clip-path 360ms cubic-bezier(0.4, 0, 0.2, 1); }
.sd-bkm__b[aria-pressed='true'] .sd-bkm__ico .f { clip-path: inset(0 0 0 0); }
.sd-bkm__b[aria-pressed='true'] .sd-bkm__ico { animation: sd-bkm-dip 420ms cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes sd-bkm-dip { 40% { transform: translateY(3px) scaleY(1.1); } }
.sd-bkm__note { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); animation: sd-bkm-in 240ms ease; }
.sd-bkm__note b { color: var(--fg); font-weight: 600; }
.sd-bkm__note button { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
@keyframes sd-bkm-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sd-bkm *, .sd-bkm *::before, .sd-bkm *::after { animation: none !important; transition: none !important; } }