feat: convert Technogen section to 5-card row style like Factory Reports with auto-slider
This commit is contained in:
alireza
parent
11b13a31ae
commit
a798a4b5ce
|
|
@ -1,13 +1,13 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Download, FileText, ExternalLink, X, Eye, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { Download, FileText, ExternalLink, X, Eye, 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 ITEMS_PER_PAGE = 5
|
||||
|
||||
const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])
|
||||
|
||||
|
|
@ -37,12 +37,8 @@ export default function TechnogenSection() {
|
|||
}
|
||||
}, [])
|
||||
|
||||
// Featured report (POSCO study) vs analytical notes
|
||||
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 totalPages = Math.max(1, Math.ceil(reports.length / ITEMS_PER_PAGE))
|
||||
const currentReports = reports.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE)
|
||||
|
||||
const goNext = () => {
|
||||
setDirection(1)
|
||||
|
|
@ -70,12 +66,12 @@ export default function TechnogenSection() {
|
|||
background: 'linear-gradient(180deg, #021a30 0%, #042442 50%, #021629 100%)',
|
||||
borderTop: '1px solid rgba(205,158,83,0.3)',
|
||||
borderBottom: '1px solid rgba(205,158,83,0.3)',
|
||||
padding: '48px 0 54px',
|
||||
padding: '44px 0 52px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Background ambient lighting */}
|
||||
{/* Ambient background lighting */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
|
|
@ -104,464 +100,309 @@ export default function TechnogenSection() {
|
|||
/>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-4" style={{ position: 'relative', zIndex: 1 }}>
|
||||
{/* ── Section Header with Gold Accent Line ── */}
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
|
||||
<h2
|
||||
style={{
|
||||
fontSize: 'clamp(20px, 2.2vw, 28px)',
|
||||
fontWeight: 900,
|
||||
color: '#FFFFFF',
|
||||
margin: 0,
|
||||
letterSpacing: isFa ? '-0.5px' : '-0.2px',
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
{isFa ? 'تکنوژن؛ برنامه توسعهگر ملی فناوری' : 'Technogen: National Technology Developer Program'}
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
margin: '6px 0 0',
|
||||
paddingInlineStart: 16,
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
{isFa
|
||||
? 'گزارشهای تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
|
||||
: 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── Bento Grid Layout (Unified Single Block) ── */}
|
||||
{/* ── Section Header with Gold Accent Line & Slider Controls ── */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(12, 1fr)',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 24,
|
||||
flexWrap: 'wrap',
|
||||
gap: 16,
|
||||
alignItems: 'stretch',
|
||||
}}
|
||||
className="max-lg:!grid-cols-1"
|
||||
>
|
||||
{/* ── Bento Card 1: Flagship POSCO Study (Spans 7 columns) ── */}
|
||||
{featured && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, ease: EASE }}
|
||||
style={{
|
||||
gridColumn: 'span 7',
|
||||
position: 'relative',
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
|
||||
boxShadow: '0 16px 36px -10px rgba(0,0,0,0.5)',
|
||||
border: '1px solid rgba(205,158,83,0.3)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
padding: '24px 28px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 24,
|
||||
}}
|
||||
className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
|
||||
>
|
||||
{/* Cover Thumbnail */}
|
||||
<div
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
|
||||
<h2
|
||||
style={{
|
||||
flex: '0 0 160px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: 'clamp(20px, 2.2vw, 28px)',
|
||||
fontWeight: 900,
|
||||
color: '#FFFFFF',
|
||||
margin: 0,
|
||||
letterSpacing: isFa ? '-0.5px' : '-0.2px',
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
className="max-md:!w-full"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.03, y: -3 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
onClick={() => openPreview(featured)}
|
||||
style={{
|
||||
width: 150,
|
||||
aspectRatio: '1 / 1.414',
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
cursor: 'pointer',
|
||||
background: NAVY,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={featured.coverImage}
|
||||
alt={isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
{isFa ? 'تکنوژن؛ برنامه توسعهگر ملی فناوری' : 'Technogen: National Technology Developer Program'}
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
margin: '6px 0 0',
|
||||
paddingInlineStart: 16,
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
{isFa
|
||||
? 'گزارشهای تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
|
||||
: 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Info & Actions */}
|
||||
<div
|
||||
{/* Slider controls (visible if more than 5 reports) */}
|
||||
{totalPages > 1 && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>
|
||||
{isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={goNext}
|
||||
style={{
|
||||
flex: '1 1 0',
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.08)',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: 0,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
className="max-md:!text-center"
|
||||
className="hover:!bg-gold hover:!text-navy"
|
||||
title={isFa ? 'بعدی' : 'Next'}
|
||||
>
|
||||
{/* Tag Pill */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 10,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
className="max-md:!justify-center"
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
background: GOLD,
|
||||
color: NAVY,
|
||||
fontSize: 10,
|
||||
fontWeight: 900,
|
||||
padding: '3px 9px',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
{isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3
|
||||
style={{
|
||||
fontSize: 'clamp(16px, 1.6vw, 20px)',
|
||||
fontWeight: 900,
|
||||
lineHeight: 1.4,
|
||||
margin: '0 0 8px',
|
||||
color: '#fff',
|
||||
}}
|
||||
>
|
||||
{isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
|
||||
</h3>
|
||||
|
||||
{/* Subtitle / Excerpt */}
|
||||
{featured.subtitleFa && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: 12,
|
||||
lineHeight: 1.7,
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
margin: '0 0 16px',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
className="max-md:!justify-center"
|
||||
>
|
||||
{featured.fileUrl && (
|
||||
<a
|
||||
href={featured.fileUrl}
|
||||
download
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`,
|
||||
color: NAVY,
|
||||
fontSize: 12,
|
||||
fontWeight: 900,
|
||||
padding: '9px 16px',
|
||||
borderRadius: 8,
|
||||
textDecoration: 'none',
|
||||
boxShadow: '0 6px 16px -4px rgba(205,158,83,0.4)',
|
||||
transition: 'transform 0.15s',
|
||||
}}
|
||||
className="hover:!brightness-105 active:!scale-95"
|
||||
>
|
||||
<Download size={14} strokeWidth={2.5} />
|
||||
<span>{isFa ? 'دانلود PDF کامل' : 'Download PDF'}</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => openPreview(featured)}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
background: 'rgba(255,255,255,0.08)',
|
||||
border: '1px solid rgba(255,255,255,0.22)',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
padding: '9px 14px',
|
||||
borderRadius: 8,
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.15s',
|
||||
}}
|
||||
className="hover:!bg-white/15"
|
||||
>
|
||||
<BookOpen size={14} />
|
||||
<span>{isFa ? 'مشاهده آنلاین' : 'Read'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={goPrev}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
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={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */}
|
||||
<div
|
||||
{/* ── 5-Card Row / Slider Strip (Like Factory Reports) ── */}
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
<motion.div
|
||||
key={page}
|
||||
initial={{ opacity: 0, x: isFa ? direction * -30 : direction * 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: isFa ? direction * 30 : direction * -30 }}
|
||||
transition={{ duration: 0.3, ease: EASE }}
|
||||
style={{
|
||||
gridColumn: 'span 5',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
gap: 10,
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
|
||||
gap: 14,
|
||||
alignItems: 'stretch',
|
||||
}}
|
||||
className="max-lg:!col-span-1"
|
||||
className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
|
||||
>
|
||||
{/* Slider Content Frame */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
{currentReports.map((report) => {
|
||||
const isSpecial = !!report.isFeatured
|
||||
return (
|
||||
<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' }}
|
||||
key={report.id}
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: isSpecial
|
||||
? 'linear-gradient(135deg, rgba(205,158,83,0.12) 0%, rgba(3,35,64,0.4) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%)',
|
||||
borderRadius: 20,
|
||||
border: isSpecial ? '1px solid rgba(205,158,83,0.4)' : '1px solid rgba(255,255,255,0.12)',
|
||||
boxShadow: '0 12px 28px -12px rgba(0,0,0,0.5)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
overflow: 'hidden',
|
||||
paddingBottom: 4,
|
||||
}}
|
||||
>
|
||||
{currentNotes.map((note) => (
|
||||
<div
|
||||
key={note.id}
|
||||
{/* Top Cover Image */}
|
||||
<div
|
||||
onClick={() => openPreview(report)}
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '1 / 1.15',
|
||||
overflow: 'hidden',
|
||||
background: NAVY,
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={report.coverImage}
|
||||
alt={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
|
||||
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',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
transition: 'transform 0.3s ease',
|
||||
}}
|
||||
className="hover:scale-105"
|
||||
/>
|
||||
|
||||
{/* Tag badge overlay */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: isFa ? 10 : 'auto',
|
||||
left: isFa ? 'auto' : 10,
|
||||
}}
|
||||
>
|
||||
{/* Mini Cover Thumbnail */}
|
||||
<div
|
||||
onClick={() => openPreview(note)}
|
||||
<span
|
||||
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',
|
||||
background: isSpecial ? GOLD : 'rgba(3,35,64,0.85)',
|
||||
color: isSpecial ? NAVY : '#f0c784',
|
||||
border: isSpecial ? 'none' : '1px solid rgba(205,158,83,0.3)',
|
||||
fontSize: 9,
|
||||
fontWeight: 900,
|
||||
padding: '3px 8px',
|
||||
borderRadius: 4,
|
||||
backdropFilter: 'blur(4px)',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={note.coverImage}
|
||||
alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
{isFa ? (report.tagFa || 'گزارش تکنوژن') : (report.tagEn || 'Technogen Report')}
|
||||
</span>
|
||||
</div>
|
||||
</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>
|
||||
{/* Card Content Body */}
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 16px 12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
textAlign: isFa ? 'right' : 'left',
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
onClick={() => openPreview(report)}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 900,
|
||||
color: '#FFFFFF',
|
||||
lineHeight: 1.45,
|
||||
margin: '0 0 6px',
|
||||
cursor: 'pointer',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
minHeight: 40,
|
||||
}}
|
||||
title={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
|
||||
>
|
||||
{isFa ? report.titleFa : (report.titleEn || report.titleFa)}
|
||||
</h3>
|
||||
|
||||
<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>
|
||||
{report.subtitleFa && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: 11,
|
||||
lineHeight: 1.55,
|
||||
color: 'rgba(255,255,255,0.65)',
|
||||
margin: '0 0 12px',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{isFa ? report.subtitleFa : (report.subtitleEn || report.subtitleFa)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{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)}
|
||||
{/* Bottom Action Buttons */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
paddingTop: 10,
|
||||
borderTop: '1px solid rgba(255,255,255,0.08)',
|
||||
}}
|
||||
>
|
||||
{report.fileUrl && (
|
||||
<a
|
||||
href={report.fileUrl}
|
||||
download
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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',
|
||||
gap: 5,
|
||||
color: GOLD,
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
textDecoration: 'none',
|
||||
transition: 'opacity 0.15s',
|
||||
}}
|
||||
className="hover:!border-gold"
|
||||
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
|
||||
className="hover:!opacity-80"
|
||||
>
|
||||
<Eye size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<Download size={14} />
|
||||
<span>{isFa ? 'دانلود PDF' : 'Download'}</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Slider Navigation Bar (Below the cards for perfect top alignment) */}
|
||||
{totalPages > 1 && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px 4px 0',
|
||||
borderTop: '1px solid rgba(255,255,255,0.08)',
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', 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={goNext}
|
||||
<button
|
||||
onClick={() => openPreview(report)}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
padding: '2px 6px',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
className="hover:!text-white"
|
||||
>
|
||||
<Eye size={13} />
|
||||
<span>{isFa ? 'مشاهده' : 'View'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Gold Accent Bar */}
|
||||
<div
|
||||
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',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: 3,
|
||||
backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.3)',
|
||||
borderRadius: '0 0 20px 20px',
|
||||
}}
|
||||
className="hover:!bg-gold hover:!text-navy"
|
||||
title={isFa ? 'بعدی' : 'Next'}
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* ── Document Reader / Preview Modal ── */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue