feat: complete publications and research sections and resolve conflicts

2026-04-14 23:51:53 +07:00
parent a7356cdb7a f82c4626c1
commit 45ba12e41e
51 changed files with 4897 additions and 1769 deletions
--- a/app/components/research/ResearchSearch.tsx
+++ b/app/components/research/ResearchSearch.tsx
@@ -0,0 +1,115 @@
+'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;