forked from UKSOURCE/hailearning.edu.vn
116 lines
5.0 KiB
TypeScript
116 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const ResearchSearch = () => {
|
|
const [query, setQuery] = useState('');
|
|
const [activeFilter, setActiveFilter] = useState('Researchers');
|
|
const filters = ['Researchers', 'Labs', 'Projects', 'Institutes'];
|
|
const router = useRouter();
|
|
|
|
const handleSearch = () => {
|
|
const params = new URLSearchParams({ q: query, type: activeFilter });
|
|
router.push(`/research/search?${params.toString()}`);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto mb-10" style={{ padding: '0 1rem' }}>
|
|
|
|
{/* Search bar */}
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i className="fa-solid fa-magnifying-glass" style={{ color: '#9ca3af' }}></i>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
placeholder="Search across researchers, labs, projects, and disciplines..."
|
|
style={{
|
|
width: '100%',
|
|
paddingLeft: '3rem',
|
|
paddingRight: '8rem',
|
|
paddingTop: '1rem',
|
|
paddingBottom: '1rem',
|
|
backgroundColor: '#ffffff',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '1rem',
|
|
boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
|
|
fontSize: '1rem',
|
|
color: '#374151',
|
|
outline: 'none',
|
|
transition: 'border-color 0.2s, box-shadow 0.2s',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
onFocus={(e) => {
|
|
e.target.style.borderColor = '#263c6f';
|
|
e.target.style.boxShadow = '0 0 0 2px rgba(38,60,111,0.15)';
|
|
}}
|
|
onBlur={(e) => {
|
|
e.target.style.borderColor = '#e5e7eb';
|
|
e.target.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.05)';
|
|
}}
|
|
/>
|
|
<div className="absolute flex items-center" style={{ top: '0.5rem', bottom: '0.5rem', right: '0.5rem' }}>
|
|
<button
|
|
onClick={handleSearch}
|
|
style={{
|
|
backgroundColor: '#263c6f',
|
|
color: '#ffffff',
|
|
padding: '0.5rem 1.5rem',
|
|
borderRadius: '0.75rem',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
height: '100%',
|
|
transition: 'opacity 0.2s',
|
|
}}
|
|
onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.9')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
|
|
>
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter pills */}
|
|
<div className="flex gap-3 mt-4 px-2" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<span style={{ fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.25rem' }}>
|
|
Filters:
|
|
</span>
|
|
{filters.map((filter) => (
|
|
<button
|
|
key={filter}
|
|
onClick={() => setActiveFilter(filter)}
|
|
style={{
|
|
fontSize: '0.75rem',
|
|
fontWeight: 500,
|
|
padding: '0.25rem 0.75rem',
|
|
borderRadius: '9999px',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.2s',
|
|
backgroundColor: activeFilter === filter ? 'rgba(38,60,111,0.1)' : '#f3f4f6',
|
|
color: activeFilter === filter ? '#263c6f' : '#4b5563',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#e5e7eb';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (activeFilter !== filter) e.currentTarget.style.backgroundColor = '#f3f4f6';
|
|
}}
|
|
>
|
|
{filter}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ResearchSearch;
|