forked from UKSOURCE/hailearning.edu.vn
95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
const DOMAINS = ['Law & Policy (42)', 'Cognitive Science (28)', 'Environmental Studies (35)', 'History & Humanities (50)', 'Economics (19)'];
|
|
const STATUSES = ['Active', 'Data Collection', 'Review', 'Completed'];
|
|
const TYPES = ['Researchers', 'Labs', 'Projects', 'Institutes'];
|
|
|
|
const AccordionSection = ({
|
|
title,
|
|
open,
|
|
onToggle,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
open: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
}) => (
|
|
<div className="pub-accordion-item">
|
|
<button
|
|
className={`pub-accordion-trigger ${open ? 'open' : ''}`}
|
|
onClick={onToggle}
|
|
>
|
|
{title}
|
|
<i className="fa-solid fa-chevron-down"></i>
|
|
</button>
|
|
<div className={`pub-accordion-body ${open ? 'open' : ''}`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const ResearchSearchSidebar = () => {
|
|
const [isDomainOpen, setIsDomainOpen] = useState(true);
|
|
const [isStatusOpen, setIsStatusOpen] = useState(true);
|
|
const [isTypeOpen, setIsTypeOpen] = useState(true);
|
|
|
|
return (
|
|
<aside className="pub-sidebar">
|
|
<div className="pub-sidebar-inner">
|
|
|
|
<div className="pub-sidebar-header">
|
|
<h2>
|
|
<i className="fa-solid fa-filter"></i> Filters
|
|
</h2>
|
|
<button className="pub-clear-btn">Clear All</button>
|
|
</div>
|
|
|
|
<div className="pub-accordion">
|
|
|
|
{/* Research Domain */}
|
|
<AccordionSection title="Research Domain" open={isDomainOpen} onToggle={() => setIsDomainOpen(!isDomainOpen)}>
|
|
<div className="pub-filter-list">
|
|
{DOMAINS.map((d, i) => (
|
|
<label key={d} className="pub-filter-label">
|
|
<input type="checkbox" className="pub-checkbox" defaultChecked={i === 0} />
|
|
<span>{d}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Project Status */}
|
|
<AccordionSection title="Project Status" open={isStatusOpen} onToggle={() => setIsStatusOpen(!isStatusOpen)}>
|
|
<div className="pub-filter-list">
|
|
{STATUSES.map((s) => (
|
|
<label key={s} className="pub-filter-label">
|
|
<input type="checkbox" className="pub-checkbox" />
|
|
<span>{s}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Type */}
|
|
<AccordionSection title="Type" open={isTypeOpen} onToggle={() => setIsTypeOpen(!isTypeOpen)}>
|
|
<div className="pub-filter-list">
|
|
{TYPES.map((t) => (
|
|
<label key={t} className="pub-filter-label">
|
|
<input type="checkbox" className="pub-checkbox" />
|
|
<span>{t}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default ResearchSearchSidebar;
|