forked from UKSOURCE/hailearning.edu.vn
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
'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;
|