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 { 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 { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
|
||||
|
||||
const NAVY = '#032340'
|
||||
const GOLD = '#CD9E53'
|
||||
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() {
|
||||
const { lang } = useLang()
|
||||
const isFa = lang === 'fa'
|
||||
const [reports, setReports] = useState<TechnogenReport[]>(FALLBACK_TECHNOGEN_REPORTS)
|
||||
const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
|
||||
const [page, setPage] = useState(0)
|
||||
const [direction, setDirection] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
let unmounted = false
|
||||
|
|
@ -36,6 +41,19 @@ export default function TechnogenSection() {
|
|||
const featured = reports.find((r) => r.isFeatured) || reports[0]
|
||||
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) => {
|
||||
setSelectedReport(report)
|
||||
}
|
||||
|
|
@ -314,162 +332,232 @@ export default function TechnogenSection() {
|
|||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
|
||||
{/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */}
|
||||
<div
|
||||
style={{
|
||||
gridColumn: 'span 5',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 10,
|
||||
justifyContent: 'space-between',
|
||||
gap: 10,
|
||||
}}
|
||||
className="max-lg:!col-span-1"
|
||||
>
|
||||
{analyticalNotes.map((note, idx) => (
|
||||
<motion.div
|
||||
key={note.id}
|
||||
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 }}
|
||||
{/* Slider Navigation Bar */}
|
||||
{totalPages > 1 && (
|
||||
<div
|
||||
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',
|
||||
justifyContent: 'space-between',
|
||||
padding: '2px 4px',
|
||||
}}
|
||||
>
|
||||
{/* 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 style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
|
||||
{isFa ? 'سایر یادداشتهای تحلیلی' : 'Analytical Notes'}
|
||||
</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>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
|
||||
{isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => openPreview(note)}
|
||||
onClick={isFa ? goNext : goPrev}
|
||||
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',
|
||||
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'}
|
||||
className="hover:!bg-gold hover:!text-navy"
|
||||
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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue