Commit workspace changes

resources/js/components/docs/DocsCallout.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+const TONES = {
+  tip: {
+    shell: 'border-sky-300/25 bg-sky-400/10 text-sky-50',
+    icon: 'fa-solid fa-lightbulb text-sky-200',
+    label: 'Tip',
+  },
+  note: {
+    shell: 'border-white/15 bg-white/[0.05] text-white',
+    icon: 'fa-solid fa-circle-info text-slate-200',
+    label: 'Note',
+  },
+  warning: {
+    shell: 'border-amber-300/25 bg-amber-400/10 text-amber-50',
+    icon: 'fa-solid fa-triangle-exclamation text-amber-200',
+    label: 'Warning',
+  },
+  practice: {
+    shell: 'border-emerald-300/25 bg-emerald-400/10 text-emerald-50',
+    icon: 'fa-solid fa-badge-check text-emerald-200',
+    label: 'Best Practice',
+  },
+}
+
+export default function DocsCallout({ tone = 'note', title, children }) {
+  const styles = TONES[tone] || TONES.note
+
+  return (
+    <aside className={`rounded-[24px] border px-4 py-4 md:px-5 ${styles.shell}`}>
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-black/20">
+          <i className={styles.icon} />
+        </div>
+        <div className="min-w-0">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">{styles.label}</p>
+          {title ? <h3 className="mt-1 text-base font-semibold">{title}</h3> : null}
+          <div className="mt-2 text-sm leading-6 opacity-90">{children}</div>
+        </div>
+      </div>
+    </aside>
+  )
+}