Add Mohamed Salah's report and custom PDF presentation
Integrates Mohamed Salah's report via an HTML file and a custom-built slide component, replacing the generic PDF viewer. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/X7hAtXn
This commit is contained in:
kimjaehyeon0101
@ -12,7 +12,7 @@ import type { MediaOutlet } from "@shared/schema";
|
||||
import Footer from "@/components/Footer";
|
||||
import SearchModal from "@/components/SearchModal";
|
||||
|
||||
const reportContent: Record<string, { htmlPath: string; pptPath: string }> = {
|
||||
const reportContent: Record<string, { htmlPath: string; pptPath?: string; customComponent?: boolean }> = {
|
||||
'chayan-asli': {
|
||||
htmlPath: '/attached_assets/chayan asli report_1759208054055.html',
|
||||
pptPath: '/attached_assets/chayan asli slides_1759213492580.pptx'
|
||||
@ -20,9 +20,236 @@ const reportContent: Record<string, { htmlPath: string; pptPath: string }> = {
|
||||
'krysh-parker': {
|
||||
htmlPath: '/attached_assets/krysh parker report_1759209671294.html',
|
||||
pptPath: '/attached_assets/krysh parker slides_1759209102236.pptx'
|
||||
},
|
||||
'mohamed-salah': {
|
||||
htmlPath: '/attached_assets/Mohamed Salah_Report_en_1760420154846.html',
|
||||
customComponent: true
|
||||
}
|
||||
};
|
||||
|
||||
function MohamedSalahSlides() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
title: "MOHAMED SALAH",
|
||||
subtitle: "The Complete Biography: Life, Career, and Legacy of Egypt's Football King",
|
||||
content: null,
|
||||
bgColor: "bg-gradient-to-br from-red-600 to-red-800"
|
||||
},
|
||||
{
|
||||
title: "Early Life & Birth Details",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Born</p>
|
||||
<p className="text-lg font-semibold">June 15, 1992</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Birthplace</p>
|
||||
<p className="text-lg font-semibold">Nagrig, Basyoun, Egypt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Full Name</p>
|
||||
<p className="text-lg font-semibold">Mohamed Salah Hamed Mahrous Ghaly</p>
|
||||
</div>
|
||||
<p className="text-gray-700 mt-4">
|
||||
Born to a middle-class Egyptian family in a small farming village north of Cairo, Mohamed Salah grew up in modest surroundings that gave no indication of the football stardom that awaited him.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Education & Early Football Training",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-yellow-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold mb-2">Extraordinary Commute</h3>
|
||||
<p className="text-gray-700 mb-3">
|
||||
At age 14, Salah made a 4.5-hour journey (each way) five days a week from his village to train with El Mokawloon in Cairo.
|
||||
</p>
|
||||
<blockquote className="italic border-l-4 border-yellow-400 pl-3 text-gray-600 text-sm">
|
||||
"I missed quite a lot of school because it was the only way that I could get to training on time..."
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "European Career Progression",
|
||||
content: (
|
||||
<div className="space-y-3">
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<h3 className="font-semibold">FC Basel (2012-2014)</h3>
|
||||
<p className="text-sm text-gray-600">79 Games | 20 Goals | Swiss Golden Player award</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-blue-700 pl-4">
|
||||
<h3 className="font-semibold">Chelsea FC (2014-2015)</h3>
|
||||
<p className="text-sm text-gray-600">19 Games | 2 Goals | Limited opportunities</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-purple-600 pl-4">
|
||||
<h3 className="font-semibold">AS Roma (2015-2017)</h3>
|
||||
<p className="text-sm text-gray-600">83 Games | 34 Goals | Roma Player of the Year 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Liverpool Achievements",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-red-50 p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-red-600">186</div>
|
||||
<div className="text-sm text-gray-600">Premier League goals</div>
|
||||
</div>
|
||||
<div className="bg-red-50 p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-red-600">32</div>
|
||||
<div className="text-sm text-gray-600">Goals in 38-game PL season (record)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<h3 className="font-semibold mb-2">Major Honours</h3>
|
||||
<ul className="list-disc list-inside text-sm space-y-1 text-gray-700">
|
||||
<li>UEFA Champions League winner (2019)</li>
|
||||
<li>Premier League champion (2019-20)</li>
|
||||
<li>3× Premier League Golden Boot</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Business Ventures & Investments",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold mb-2">Investment Portfolio</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><strong>MOS Real Estate Ltd</strong> - UK-based property development</li>
|
||||
<li><strong>Salah UK Commercial</strong> - £25 million in assets (2024)</li>
|
||||
<li><strong>Dubai Property</strong> - Luxury real estate near Burj Khalifa</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-green-600">$90M</div>
|
||||
<div className="text-sm text-gray-600">Estimated Net Worth (2025)</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Personal Life & Family",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Wife</p>
|
||||
<p className="font-semibold">Magi Sadeq (married 2013)</p>
|
||||
<p className="text-sm text-gray-600">Childhood sweetheart</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-1">Children</p>
|
||||
<p className="font-semibold">Makka (2014) & Kayan (2020)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<p className="text-sm text-gray-700">
|
||||
Despite global fame, Salah prioritizes family life. The family resides in a modest Liverpool suburb, emphasizing simplicity over ostentation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Social Impact & Charity Work",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-purple-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold mb-2">Major Charitable Initiatives</h3>
|
||||
<p className="text-sm text-gray-700 mb-2">
|
||||
Salah has funded numerous projects in his hometown of Nagrig, including schools, youth centers, and medical equipment.
|
||||
</p>
|
||||
<div className="text-2xl font-bold text-purple-600 text-center">$3M+</div>
|
||||
<p className="text-sm text-gray-600 text-center">
|
||||
Donated to National Cancer Institute in Cairo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "Legacy & The Salah Effect",
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 p-4 rounded-lg">
|
||||
<h3 className="font-semibold mb-2">The Salah Effect</h3>
|
||||
<p className="text-sm text-gray-700">
|
||||
Research from Stanford University documented how his prominence at Liverpool led to a 16% decrease in hate crimes and Islamophobia in Merseyside.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-start space-x-2">
|
||||
<span className="font-bold text-blue-600">1.</span>
|
||||
<p>First Egyptian to win the Premier League and Champions League</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<span className="font-bold text-blue-600">2.</span>
|
||||
<p>Major investments in healthcare, education and infrastructure in Egypt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card className={`${slides[currentSlide].bgColor || 'bg-white'}`}>
|
||||
<CardContent className={`p-12 ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'}`}>
|
||||
<div className="min-h-[400px] flex flex-col justify-center">
|
||||
<h2 className="text-4xl font-bold mb-4" data-testid="text-slide-title">
|
||||
{slides[currentSlide].title}
|
||||
</h2>
|
||||
{slides[currentSlide].subtitle && (
|
||||
<p className="text-xl opacity-90 mb-6">{slides[currentSlide].subtitle}</p>
|
||||
)}
|
||||
{slides[currentSlide].content && (
|
||||
<div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-6 rounded-lg' : ''}>
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentSlide(Math.max(0, currentSlide - 1))}
|
||||
disabled={currentSlide === 0}
|
||||
data-testid="button-prev-slide"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<div className="text-sm text-gray-600">
|
||||
Slide {currentSlide + 1} of {slides.length}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentSlide(Math.min(slides.length - 1, currentSlide + 1))}
|
||||
disabled={currentSlide === slides.length - 1}
|
||||
data-testid="button-next-slide"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Report() {
|
||||
const [, params] = useRoute("/media/:slug/report");
|
||||
const [, setLocation] = useLocation();
|
||||
@ -427,21 +654,35 @@ export default function Report() {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="slides" className="w-full">
|
||||
<div className="w-full bg-white rounded-lg overflow-hidden shadow-lg">
|
||||
<div className="relative w-full" style={{ paddingTop: '56.25%' }}>
|
||||
<iframe
|
||||
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getFullPptUrl())}`}
|
||||
className="absolute top-0 left-0 w-full h-full border-none"
|
||||
title="Presentation Slides"
|
||||
data-testid="iframe-slides"
|
||||
allowFullScreen
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
{slug === 'mohamed-salah' && content.customComponent ? (
|
||||
<MohamedSalahSlides />
|
||||
) : content.pptPath ? (
|
||||
<div className="w-full bg-white rounded-lg overflow-hidden shadow-lg">
|
||||
<div className="relative w-full" style={{ paddingTop: '56.25%' }}>
|
||||
<iframe
|
||||
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getFullPptUrl())}`}
|
||||
className="absolute top-0 left-0 w-full h-full border-none"
|
||||
title="Presentation Slides"
|
||||
data-testid="iframe-slides"
|
||||
allowFullScreen
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<Presentation className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">No Slides Available</h2>
|
||||
<p className="text-gray-600">
|
||||
There are no presentation slides available for this media outlet yet.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user