Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add paginated slider carousel for Technogen analytical notes

This commit is contained in:
alireza 2026-08-25 15:48:02 +03:30
parent c6fc734a9e
commit dbf9d63f39
1 changed files with 220 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/pages/Home/sections/TechnogenSection.tsx
View File

@ -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,25 +332,92 @@ 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) => (
{/* Slider Navigation Bar */}
{totalPages > 1 && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '2px 4px',
}}
>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
{isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
</div>
<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={isFa ? goNext : goPrev}
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 ? 'قبلی' : 'Previous'}
>
<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>
</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}
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={{
background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
borderRadius: 14,
@ -468,8 +553,11 @@ export default function TechnogenSection() {
<Eye size={14} />
</button>
</div>
</motion.div>
</div>
))}
</motion.div>
</AnimatePresence>
</div>
</div>
</div>
</div>