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