forked from UKSOURCE/hailearning.edu.vn
feat: complete publications and research sections and resolve conflicts
This commit is contained in:
177
app/components/research/search/ResearchSearchResults.tsx
Normal file
177
app/components/research/search/ResearchSearchResults.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const SORT_OPTIONS = ['Relevance', 'Newest First', 'Most Active', 'Alphabetical'];
|
||||
|
||||
const RESULTS = [
|
||||
{
|
||||
type: 'Project',
|
||||
badgeClass: 'pub-badge-open',
|
||||
badgeIcon: 'fa-flask',
|
||||
badgeLabel: 'Active Project',
|
||||
statusClass: 'pub-badge-peer',
|
||||
statusLabel: 'Environmental Studies',
|
||||
title: 'Urban Microclimate Modeling',
|
||||
lead: 'Dr. Alan Turing',
|
||||
updated: 'Updated 2 days ago',
|
||||
center: 'Institute for Climate Research',
|
||||
desc: 'Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning and satellite data.',
|
||||
tags: ['Climate', 'Machine Learning', 'Urban Studies'],
|
||||
progress: 65,
|
||||
},
|
||||
{
|
||||
type: 'Lab',
|
||||
badgeClass: 'pub-badge-institutional',
|
||||
badgeIcon: 'fa-building-user',
|
||||
badgeLabel: 'Research Lab',
|
||||
statusClass: 'pub-badge-peer',
|
||||
statusLabel: 'Cognitive Science',
|
||||
title: 'Cognitive Sciences Lab',
|
||||
lead: 'Prof. Marie Curie',
|
||||
updated: 'Updated 1 week ago',
|
||||
center: 'Center for Digital Humanities',
|
||||
desc: 'Exploring the intersection of artificial intelligence and human psychology, with a focus on decision-making processes and behavioral modeling.',
|
||||
tags: ['AI', 'Psychology', 'Neuroscience'],
|
||||
progress: null,
|
||||
},
|
||||
{
|
||||
type: 'Project',
|
||||
badgeClass: 'pub-badge-request',
|
||||
badgeIcon: 'fa-gavel',
|
||||
badgeLabel: 'Data Collection',
|
||||
statusClass: 'pub-badge-peer',
|
||||
statusLabel: 'Law & Policy',
|
||||
title: 'Digital Rights in the EU Framework',
|
||||
lead: 'Dr. Elena Rostova',
|
||||
updated: 'Updated 1 week ago',
|
||||
center: 'Institute for Advanced European Studies',
|
||||
desc: 'A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties across the EU.',
|
||||
tags: ['Digital Rights', 'EU Law', 'Privacy'],
|
||||
progress: 30,
|
||||
},
|
||||
];
|
||||
|
||||
const ResearchSearchResults = () => {
|
||||
const [isSortOpen, setIsSortOpen] = useState(false);
|
||||
const [selectedSort, setSelectedSort] = useState('Relevance');
|
||||
|
||||
return (
|
||||
<div className="pub-results">
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="pub-results-toolbar">
|
||||
<p className="pub-results-count">
|
||||
Showing <strong>1–10</strong> of <strong>340</strong> results
|
||||
</p>
|
||||
<div className="pub-sort-wrap">
|
||||
<label>Sort by:</label>
|
||||
<div className="pub-sort-dropdown">
|
||||
<button
|
||||
className={`pub-sort-dropdown-btn ${isSortOpen ? 'open' : ''}`}
|
||||
onClick={() => setIsSortOpen(!isSortOpen)}
|
||||
>
|
||||
<span>{selectedSort}</span>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
{isSortOpen && (
|
||||
<div className="pub-sort-dropdown-menu">
|
||||
{SORT_OPTIONS.map((opt) => (
|
||||
<div
|
||||
key={opt}
|
||||
className={`pub-sort-dropdown-option ${selectedSort === opt ? 'selected' : ''}`}
|
||||
onClick={() => { setSelectedSort(opt); setIsSortOpen(false); }}
|
||||
>
|
||||
{opt}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Result cards */}
|
||||
<div className="pub-card-list">
|
||||
{RESULTS.map((item, idx) => (
|
||||
<div key={idx} className="pub-card">
|
||||
<div className="pub-card-top">
|
||||
<h3 className="pub-card-title">
|
||||
<a href="#">{item.title}</a>
|
||||
</h3>
|
||||
<div className="pub-badges">
|
||||
<span className={`pub-badge ${item.badgeClass}`}>
|
||||
<i className={`fa-solid ${item.badgeIcon}`}></i> {item.badgeLabel}
|
||||
</span>
|
||||
<span className="pub-badge pub-badge-peer">{item.statusLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pub-card-meta">
|
||||
<div className="pub-meta-item">
|
||||
<i className="fa-solid fa-user"></i>
|
||||
<strong>{item.lead}</strong>
|
||||
</div>
|
||||
<div className="pub-meta-item">
|
||||
<i className="fa-regular fa-clock"></i> {item.updated}
|
||||
</div>
|
||||
<div className="pub-meta-item">
|
||||
<i className="fa-solid fa-building-columns"></i> {item.center}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="pub-card-abstract">{item.desc}</p>
|
||||
|
||||
<div className="pub-keywords">
|
||||
<span className="pub-keywords-label">Tags:</span>
|
||||
{item.tags.map((tag) => (
|
||||
<span key={tag} className="pub-keyword-tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{item.progress !== null && (
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<div className="flex justify-between text-xs mb-1" style={{ color: 'var(--pub-muted)' }}>
|
||||
<span>Progress</span>
|
||||
<span style={{ fontWeight: 600, color: 'var(--pub-text)' }}>{item.progress}%</span>
|
||||
</div>
|
||||
<div style={{ width: '100%', height: '6px', backgroundColor: 'var(--pub-bg)', borderRadius: '9999px' }}>
|
||||
<div style={{ width: `${item.progress}%`, height: '6px', backgroundColor: 'var(--pub-blue)', borderRadius: '9999px' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pub-card-actions">
|
||||
<button className="pub-action-btn pub-action-btn-primary">
|
||||
<i className="fa-solid fa-arrow-right"></i> View Details
|
||||
</button>
|
||||
<button className="pub-action-btn pub-action-btn-secondary">
|
||||
<i className="fa-regular fa-bookmark"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="pub-pagination">
|
||||
<button className="pub-page-btn" disabled>
|
||||
<i className="fa-solid fa-arrow-left"></i> Previous
|
||||
</button>
|
||||
<div className="pub-page-numbers">
|
||||
<button className="pub-page-num active">1</button>
|
||||
<button className="pub-page-num">2</button>
|
||||
<button className="pub-page-num">3</button>
|
||||
<span className="pub-page-ellipsis">...</span>
|
||||
<button className="pub-page-num">34</button>
|
||||
</div>
|
||||
<button className="pub-page-btn">
|
||||
Next <i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResearchSearchResults;
|
||||
Reference in New Issue
Block a user