feat: add paginated slider carousel for Technogen analytical notes
This commit is contained in:
alireza
parent
c6fc734a9e
commit
dbf9d63f39
|
|
@ -1,18 +1,23 @@
|
||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { motion, AnimatePresence } from 'framer-motion'
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
import { Download, FileText, ExternalLink, X, Eye, BookOpen } from 'lucide-react'
|
import { Download, FileText, ExternalLink, X, Eye, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
import { useLang } from '@/context/LangContext'
|
import { useLang } from '@/context/LangContext'
|
||||||
import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
|
import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
|
||||||
|
|
||||||
const NAVY = '#032340'
|
const NAVY = '#032340'
|
||||||
const GOLD = '#CD9E53'
|
const GOLD = '#CD9E53'
|
||||||
const EASE = [0.22, 1, 0.36, 1] as const
|
const EASE = [0.22, 1, 0.36, 1] as const
|
||||||
|
const PAGE_SIZE = 3
|
||||||
|
|
||||||
|
const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])
|
||||||
|
|
||||||
export default function TechnogenSection() {
|
export default function TechnogenSection() {
|
||||||
const { lang } = useLang()
|
const { lang } = useLang()
|
||||||
const isFa = lang === 'fa'
|
const isFa = lang === 'fa'
|
||||||
const [reports, setReports] = useState<TechnogenReport[]>(FALLBACK_TECHNOGEN_REPORTS)
|
const [reports, setReports] = useState<TechnogenReport[]>(FALLBACK_TECHNOGEN_REPORTS)
|
||||||
const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
|
const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
|
||||||
|
const [page, setPage] = useState(0)
|
||||||
|
const [direction, setDirection] = useState(0)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let unmounted = false
|
let unmounted = false
|
||||||
|
|
@ -36,6 +41,19 @@ export default function TechnogenSection() {
|
||||||
const featured = reports.find((r) => r.isFeatured) || reports[0]
|
const featured = reports.find((r) => r.isFeatured) || reports[0]
|
||||||
const analyticalNotes = reports.filter((r) => r.id !== featured?.id)
|
const analyticalNotes = reports.filter((r) => r.id !== featured?.id)
|
||||||
|
|
||||||
|
const totalPages = Math.max(1, Math.ceil(analyticalNotes.length / PAGE_SIZE))
|
||||||
|
const currentNotes = analyticalNotes.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
|
||||||
|
|
||||||
|
const goNext = () => {
|
||||||
|
setDirection(1)
|
||||||
|
setPage((p) => (p + 1) % totalPages)
|
||||||
|
}
|
||||||
|
|
||||||
|
const goPrev = () => {
|
||||||
|
setDirection(-1)
|
||||||
|
setPage((p) => (p - 1 + totalPages) % totalPages)
|
||||||
|
}
|
||||||
|
|
||||||
const openPreview = (report: TechnogenReport) => {
|
const openPreview = (report: TechnogenReport) => {
|
||||||
setSelectedReport(report)
|
setSelectedReport(report)
|
||||||
}
|
}
|
||||||
|
|
@ -314,162 +332,232 @@ export default function TechnogenSection() {
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
|
{/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
gridColumn: 'span 5',
|
gridColumn: 'span 5',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
gap: 10,
|
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
|
gap: 10,
|
||||||
}}
|
}}
|
||||||
className="max-lg:!col-span-1"
|
className="max-lg:!col-span-1"
|
||||||
>
|
>
|
||||||
{analyticalNotes.map((note, idx) => (
|
{/* Slider Navigation Bar */}
|
||||||
<motion.div
|
{totalPages > 1 && (
|
||||||
key={note.id}
|
<div
|
||||||
initial={{ opacity: 0, x: isFa ? -12 : 12 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
|
|
||||||
whileHover={{ y: -2 }}
|
|
||||||
style={{
|
style={{
|
||||||
background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
|
|
||||||
borderRadius: 14,
|
|
||||||
border: '1px solid rgba(255,255,255,0.1)',
|
|
||||||
boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
|
|
||||||
backdropFilter: 'blur(8px)',
|
|
||||||
padding: '12px 14px',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 14,
|
justifyContent: 'space-between',
|
||||||
flex: '1 1 0',
|
padding: '2px 4px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Mini Cover Thumbnail */}
|
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
|
||||||
<div
|
{isFa ? 'سایر یادداشتهای تحلیلی' : 'Analytical Notes'}
|
||||||
onClick={() => openPreview(note)}
|
|
||||||
style={{
|
|
||||||
flex: '0 0 54px',
|
|
||||||
width: 54,
|
|
||||||
aspectRatio: '1 / 1.414',
|
|
||||||
borderRadius: 6,
|
|
||||||
overflow: 'hidden',
|
|
||||||
boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
|
|
||||||
border: '1px solid rgba(255,255,255,0.15)',
|
|
||||||
background: NAVY,
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={note.coverImage}
|
|
||||||
alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
||||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
{/* Content */}
|
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
|
||||||
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
{isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
|
</span>
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
background: 'rgba(205,158,83,0.2)',
|
|
||||||
color: '#f0c784',
|
|
||||||
fontSize: 9,
|
|
||||||
fontWeight: 800,
|
|
||||||
padding: '2px 6px',
|
|
||||||
borderRadius: 3,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4
|
|
||||||
onClick={() => openPreview(note)}
|
|
||||||
style={{
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: 800,
|
|
||||||
color: '#FFFFFF',
|
|
||||||
lineHeight: 1.4,
|
|
||||||
margin: '0 0 2px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
}}
|
|
||||||
title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
||||||
>
|
|
||||||
{isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
{note.subtitleFa && (
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: 11,
|
|
||||||
lineHeight: 1.5,
|
|
||||||
color: 'rgba(255,255,255,0.65)',
|
|
||||||
margin: 0,
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Action Buttons */}
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
|
||||||
{note.fileUrl && (
|
|
||||||
<a
|
|
||||||
href={note.fileUrl}
|
|
||||||
download
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
style={{
|
|
||||||
display: 'inline-flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
width: 32,
|
|
||||||
height: 32,
|
|
||||||
borderRadius: 8,
|
|
||||||
background: 'rgba(255,255,255,0.1)',
|
|
||||||
color: '#FFFFFF',
|
|
||||||
textDecoration: 'none',
|
|
||||||
transition: 'all 0.15s',
|
|
||||||
}}
|
|
||||||
className="hover:!bg-gold hover:!text-navy"
|
|
||||||
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
|
|
||||||
>
|
|
||||||
<Download size={14} />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => openPreview(note)}
|
onClick={isFa ? goNext : goPrev}
|
||||||
style={{
|
style={{
|
||||||
display: 'inline-flex',
|
width: 26,
|
||||||
|
height: 26,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'rgba(255,255,255,0.08)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
color: '#fff',
|
||||||
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
width: 32,
|
|
||||||
height: 32,
|
|
||||||
borderRadius: 8,
|
|
||||||
background: 'transparent',
|
|
||||||
border: '1px solid rgba(255,255,255,0.2)',
|
|
||||||
color: '#FFFFFF',
|
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transition: 'all 0.15s',
|
transition: 'all 0.15s',
|
||||||
}}
|
}}
|
||||||
className="hover:!border-gold"
|
className="hover:!bg-gold hover:!text-navy"
|
||||||
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
|
title={isFa ? 'قبلی' : 'Previous'}
|
||||||
>
|
>
|
||||||
<Eye size={14} />
|
<ChevronRight size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={isFa ? goPrev : goNext}
|
||||||
|
style={{
|
||||||
|
width: 26,
|
||||||
|
height: 26,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'rgba(255,255,255,0.08)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
color: '#fff',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.15s',
|
||||||
|
}}
|
||||||
|
className="hover:!bg-gold hover:!text-navy"
|
||||||
|
title={isFa ? 'بعدی' : 'Next'}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={14} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
))}
|
)}
|
||||||
|
|
||||||
|
{/* Slider Content Frame */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
|
||||||
|
<AnimatePresence mode="wait" custom={direction}>
|
||||||
|
<motion.div
|
||||||
|
key={page}
|
||||||
|
initial={{ opacity: 0, x: isFa ? direction * -20 : direction * 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: isFa ? direction * 20 : direction * -20 }}
|
||||||
|
transition={{ duration: 0.25, ease: EASE }}
|
||||||
|
style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%', justifyContent: 'space-between' }}
|
||||||
|
>
|
||||||
|
{currentNotes.map((note) => (
|
||||||
|
<div
|
||||||
|
key={note.id}
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
|
||||||
|
borderRadius: 14,
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
|
||||||
|
backdropFilter: 'blur(8px)',
|
||||||
|
padding: '12px 14px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 14,
|
||||||
|
flex: '1 1 0',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Mini Cover Thumbnail */}
|
||||||
|
<div
|
||||||
|
onClick={() => openPreview(note)}
|
||||||
|
style={{
|
||||||
|
flex: '0 0 54px',
|
||||||
|
width: 54,
|
||||||
|
aspectRatio: '1 / 1.414',
|
||||||
|
borderRadius: 6,
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.15)',
|
||||||
|
background: NAVY,
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={note.coverImage}
|
||||||
|
alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: 'rgba(205,158,83,0.2)',
|
||||||
|
color: '#f0c784',
|
||||||
|
fontSize: 9,
|
||||||
|
fontWeight: 800,
|
||||||
|
padding: '2px 6px',
|
||||||
|
borderRadius: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4
|
||||||
|
onClick={() => openPreview(note)}
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: 800,
|
||||||
|
color: '#FFFFFF',
|
||||||
|
lineHeight: 1.4,
|
||||||
|
margin: '0 0 2px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}
|
||||||
|
title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
||||||
|
>
|
||||||
|
{isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{note.subtitleFa && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: 11,
|
||||||
|
lineHeight: 1.5,
|
||||||
|
color: 'rgba(255,255,255,0.65)',
|
||||||
|
margin: 0,
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Action Buttons */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||||
|
{note.fileUrl && (
|
||||||
|
<a
|
||||||
|
href={note.fileUrl}
|
||||||
|
download
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 8,
|
||||||
|
background: 'rgba(255,255,255,0.1)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
textDecoration: 'none',
|
||||||
|
transition: 'all 0.15s',
|
||||||
|
}}
|
||||||
|
className="hover:!bg-gold hover:!text-navy"
|
||||||
|
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
|
||||||
|
>
|
||||||
|
<Download size={14} />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => openPreview(note)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 8,
|
||||||
|
background: 'transparent',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.15s',
|
||||||
|
}}
|
||||||
|
className="hover:!border-gold"
|
||||||
|
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
|
||||||
|
>
|
||||||
|
<Eye size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue