update

resources/js/components/social/BookmarkButton.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+
+export default function BookmarkButton({ active = false, count = 0, onToggle, label = 'Save', activeLabel = 'Saved' }) {
+  const [busy, setBusy] = useState(false)
+
+  const handleClick = async () => {
+    if (!onToggle || busy) return
+    setBusy(true)
+    try {
+      await onToggle()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={busy}
+      className={[
+        'inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all disabled:cursor-not-allowed disabled:opacity-60',
+        active
+          ? 'border-amber-400/30 bg-amber-400/12 text-amber-200'
+          : 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white',
+      ].join(' ')}
+    >
+      <i className={`fa-solid fa-fw ${busy ? 'fa-circle-notch fa-spin' : 'fa-bookmark'}`} />
+      <span>{active ? activeLabel : label}</span>
+      <span className="text-xs opacity-80">{Number(count || 0).toLocaleString()}</span>
+    </button>
+  )
+}