feat: complete publications and research sections and resolve conflicts

app/components/research/search/ResearchSearchHeader.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const FILTERS = ['Researchers', 'Labs', 'Projects', 'Institutes'];
+
+const ResearchSearchHeader = () => {
+    const [query, setQuery] = useState('');
+    const [activeFilter, setActiveFilter] = useState('Researchers');
+    const router = useRouter();
+
+    const handleSearch = () => {
+        const params = new URLSearchParams({ q: query, type: activeFilter });
+        router.push(`/research/search?${params.toString()}`);
+    };
+
+    return (
+        <section id="repo-header">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+
+                {/* Title row */}
+                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-8 w-full">
+                    <div className="flex-1 max-w-3xl">
+                        <h1>Research Search</h1>
+                        <p>Search across researchers, labs, active projects, and institutes.</p>
+                    </div>
+                    <div className="flex gap-3 shrink-0">
+                        <button className="pub-btn-outline" onClick={() => router.back()}>
+                            <i className="fa-solid fa-arrow-left"></i>
+                            Back to Research
+                        </button>
+                    </div>
+                </div>
+
+                {/* Search bar */}
+                <div className="pub-search-bar">
+                    <span className="pub-search-icon">
+                        <i className="fa-solid fa-magnifying-glass"></i>
+                    </span>
+                    <input
+                        type="text"
+                        placeholder="Search researchers, labs, projects, and disciplines..."
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                    />
+                    <div className="pub-search-btn-wrap">
+                        <button className="pub-btn-primary" onClick={handleSearch}>Search</button>
+                    </div>
+                </div>
+
+                {/* Filter tabs */}
+                <div className="flex flex-wrap items-center gap-3 mt-5">
+                    <span className="text-xs font-bold uppercase tracking-widest" style={{ color: 'var(--pub-muted)' }}>
+                        Filter by:
+                    </span>
+                    {FILTERS.map((f) => (
+                        <button
+                            key={f}
+                            onClick={() => setActiveFilter(f)}
+                            className="pub-btn-outline"
+                            style={activeFilter === f ? {
+                                backgroundColor: 'var(--pub-blue-light)',
+                                color: 'var(--pub-blue)',
+                                borderColor: 'transparent',
+                            } : {}}
+                        >
+                            {f}
+                        </button>
+                    ))}
+                </div>
+
+            </div>
+        </section>
+    );
+};
+
+export default ResearchSearchHeader;