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/publications/PublicationSidebar.tsx
+++ b/app/components/publications/PublicationSidebar.tsx
@@ -0,0 +1,123 @@
+'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;