Commit workspace changes

resources/js/components/help/HelpSearchBar.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+export default function HelpSearchBar({ value, onChange, onSelectSuggestion, onClear, resultSummary, suggestions = [] }) {
+  return (
+    <div className="rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03))] p-4 shadow-[0_22px_70px_rgba(2,6,23,0.22)] md:p-5">
+      <label htmlFor="help-center-search" className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">
+        Search the help hub
+      </label>
+      <div className="mt-3 flex flex-col gap-3 lg:flex-row">
+        <div className="relative flex-1">
+          <span className="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-500">
+            <i className="fa-solid fa-magnifying-glass" />
+          </span>
+          <input
+            id="help-center-search"
+            type="search"
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            placeholder="Search upload image, group roles, create card, login issue..."
+            className="w-full rounded-[22px] border border-white/10 bg-black/20 py-3.5 pl-11 pr-4 text-sm text-white outline-none placeholder:text-slate-500"
+          />
+        </div>
+        {value ? (
+          <button
+            type="button"
+            onClick={onClear}
+            className="rounded-[22px] border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]"
+          >
+            Clear search
+          </button>
+        ) : null}
+      </div>
+      <div className="mt-4 flex flex-wrap gap-2">
+        {suggestions.map((suggestion) => (
+          <button
+            key={suggestion}
+            type="button"
+            onClick={() => onSelectSuggestion(suggestion)}
+            className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-300 transition hover:border-white/20 hover:text-white"
+          >
+            {suggestion}
+          </button>
+        ))}
+      </div>
+      <p className="mt-4 text-sm text-slate-400">{resultSummary}</p>
+    </div>
+  )
+}