refactor: reorganize project components into subdirectories and update import paths for better maintainability.

2026-05-12 04:34:06 +07:00
parent eecedec560
commit 6076f098fa
11 changed files with 10 additions and 10 deletions
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+
+export type UnifiedSearchKind = "entity" | "wiki" | "geo";
+
+type Props = {
+    kind: UnifiedSearchKind;
+    onKindChange: (kind: UnifiedSearchKind) => void;
+    query: string;
+    onQueryChange: (query: string) => void;
+    disabledGeo?: boolean;
+    debounceMs?: number;
+    onLocalQueryChange?: (query: string) => void;
+};
+
+export default function UnifiedSearchBar({
+    kind,
+    onKindChange,
+    query,
+    onQueryChange,
+    disabledGeo,
+    debounceMs = 300,
+    onLocalQueryChange,
+}: Props) {
+    // Local input state to avoid propagating query changes (and triggering API) on every keystroke.
+    const [localQuery, setLocalQuery] = useState(query);
+    const debounceTimerRef = useRef<number | null>(null);
+
+    // Keep local input in sync when parent updates `query` externally (e.g. reset, preset, navigation).
+    useEffect(() => {
+        setLocalQuery(query);
+    }, [query]);
+
+    useEffect(() => {
+        onLocalQueryChange?.(localQuery);
+    }, [localQuery, onLocalQueryChange]);
+
+    // Debounce propagation upwards.
+    useEffect(() => {
+        if (localQuery === query) return;
+
+        if (debounceTimerRef.current != null) window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = window.setTimeout(() => {
+            onQueryChange(localQuery);
+        }, debounceMs);
+
+        return () => {
+            if (debounceTimerRef.current != null) window.clearTimeout(debounceTimerRef.current);
+            debounceTimerRef.current = null;
+        };
+    }, [localQuery, query, onQueryChange, debounceMs]);
+
+    const commitNow = () => {
+        if (debounceTimerRef.current != null) window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+        if (localQuery !== query) onQueryChange(localQuery);
+    };
+
+    const selectStyle: CSSProperties = {
+        width: 110,
+        border: "1px solid #1f2937",
+        background: "#0b1220",
+        color: "#e5e7eb",
+        borderRadius: 6,
+        padding: "8px 10px",
+        fontSize: 12,
+        outline: "none",
+        flex: "0 0 auto",
+    };
+
+    const inputStyle: CSSProperties = {
+        width: "100%",
+        border: "1px solid #1f2937",
+        background: "#0b1220",
+        color: "#e5e7eb",
+        borderRadius: 6,
+        padding: "8px 10px",
+        fontSize: 12,
+        outline: "none",
+        minWidth: 0,
+    };
+
+    const helperText =
+        kind === "entity"
+            ? "Search entity theo name"
+            : kind === "wiki"
+                ? "Search wiki theo title"
+                : "Search geo theo entity name";
+
+    return (
+        <div
+            style={{
+                padding: 10,
+                background: "#0b1220",
+                borderRadius: 8,
+                border: "1px solid #1f2937",
+                display: "grid",
+                gap: 8,
+            }}
+        >
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+                <div style={{ fontWeight: 700, fontSize: 14 }}>Search</div>
+                <div style={{ fontSize: 12, color: "#94a3b8" }}>{helperText}</div>
+            </div>
+
+            <div style={{ display: "flex", gap: 8 }}>
+                <select
+                    value={kind}
+                    onChange={(e) => onKindChange(e.target.value as UnifiedSearchKind)}
+                    style={selectStyle}
+                    aria-label="Search kind"
+                >
+                    <option value="entity">Entity</option>
+                    <option value="wiki">Wiki</option>
+                    <option value="geo" disabled={Boolean(disabledGeo)}>
+                        Geo
+                    </option>
+                </select>
+                <input
+                    value={localQuery}
+                    onChange={(e) => setLocalQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") commitNow();
+                    }}
+                    onBlur={() => commitNow()}
+                    placeholder={kind === "entity" ? "Nhập tên entity…" : kind === "wiki" ? "Nhập title wiki…" : "Nhập tên entity…"}
+                    style={inputStyle}
+                    aria-label="Search query"
+                />
+            </div>
+        </div>
+    );
+}