forked from UKSOURCE/hailearning.edu.vn
124 lines
4.8 KiB
TypeScript
124 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
const YEARS = ['2024 (1,245)', '2023 (3,412)', '2022 (2,890)'];
|
|
const DOMAINS = ['Liberal Arts (4,521)', 'Social Sciences (3,210)', 'Humanities (2,980)', 'Political Science (1,840)'];
|
|
const ACCESS_TYPES = ['Open Access', 'Institutional Login', 'Request Access'];
|
|
|
|
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 PublicationSidebar = () => {
|
|
const [isYearOpen, setIsYearOpen] = useState(true);
|
|
const [isDomainOpen, setIsDomainOpen] = useState(true);
|
|
const [isAccessOpen, setIsAccessOpen] = useState(true);
|
|
const [minYear, setMinYear] = useState('');
|
|
const [maxYear, setMaxYear] = useState('');
|
|
|
|
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"
|
|
onClick={() => { setMinYear(''); setMaxYear(''); }}
|
|
>
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
|
|
<div className="pub-accordion">
|
|
|
|
{/* Publication Year */}
|
|
<AccordionSection title="Publication Year" open={isYearOpen} onToggle={() => setIsYearOpen(!isYearOpen)}>
|
|
<div className="pub-filter-list">
|
|
{YEARS.map((year, idx) => (
|
|
<label key={year} className="pub-filter-label">
|
|
<input
|
|
type="checkbox"
|
|
className="pub-checkbox"
|
|
defaultChecked={idx === 0}
|
|
/>
|
|
<span>{year}</span>
|
|
</label>
|
|
))}
|
|
<div className="pub-year-range">
|
|
<input
|
|
type="number"
|
|
placeholder="Min"
|
|
value={minYear}
|
|
onChange={(e) => setMinYear(e.target.value)}
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="Max"
|
|
value={maxYear}
|
|
onChange={(e) => setMaxYear(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Research Domain */}
|
|
<AccordionSection title="Research Domain" open={isDomainOpen} onToggle={() => setIsDomainOpen(!isDomainOpen)}>
|
|
<div className="pub-filter-list">
|
|
{DOMAINS.map((domain, idx) => (
|
|
<label key={domain} className="pub-filter-label">
|
|
<input
|
|
type="checkbox"
|
|
className="pub-checkbox"
|
|
defaultChecked={idx === 0}
|
|
/>
|
|
<span>{domain}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Access Type */}
|
|
<AccordionSection title="Access Type" open={isAccessOpen} onToggle={() => setIsAccessOpen(!isAccessOpen)}>
|
|
<div className="pub-filter-list">
|
|
{ACCESS_TYPES.map((type) => (
|
|
<label key={type} className="pub-filter-label">
|
|
<input type="checkbox" className="pub-checkbox" />
|
|
<span>{type}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default PublicationSidebar;
|