Skip to content

Commit 4608789

Browse files
janithr1janithr1
authored
Merge pull request #52 from xeptagondev/score_ring_issues
hide popup next and back
2 parents 0648cae + 82546dc commit 4608789

1 file changed

Lines changed: 54 additions & 29 deletions

File tree

‎ui/pages/popupmessage.tsx‎

Lines changed: 54 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,32 @@ import LogoSVG from "../public/undp-logo.svg";
44

55
const slides = [
66
{
7-
title: 'The Digital Development Compass Gets a Powerful Upgrade!',
8-
content: 'We’re excited to unveil major improvements to the Digital Development Compass (DDC), focusing on robustness, reliability, and clarity!'
7+
title: "The Digital Development Compass Gets a Powerful Upgrade!",
8+
content:
9+
"We’re excited to unveil major improvements to the Digital Development Compass (DDC), focusing on robustness, reliability, and clarity!",
910
},
1011
{
1112
title1: "Here's a glimpse of what's new:",
12-
content: '<b>Stronger Foundation:</b> The DDC’s structure now aligns seamlessly with the Digital Transformation Framework, providing a clearer picture of a country’s digital journey.'
13+
content:
14+
"<b>Stronger Foundation:</b> The DDC’s structure now aligns seamlessly with the Digital Transformation Framework, providing a clearer picture of a country’s digital journey.",
1315
},
1416
{
15-
content: "<b>Expert Guidance:</b> A dedicated Expert Committee has been established to review data and methodologies, ensuring the highest quality standards."
17+
content:
18+
"<b>Expert Guidance:</b> A dedicated Expert Committee has been established to review data and methodologies, ensuring the highest quality standards.",
1619
},
1720
{
18-
content: "<b>Enhanced Data:</b> Data sources have undergone a rigorous cleaning process, with new ones added based on stricter selection criteria. This means you'll find the most reliable and relevant information at your fingertips."
21+
content:
22+
"<b>Enhanced Data:</b> Data sources have undergone a rigorous cleaning process, with new ones added based on stricter selection criteria. This means you'll find the most reliable and relevant information at your fingertips.",
1923
},
2024
{
21-
content: "<b>Solid Methodology:</b> The DDC's methodology has been strengthened by improved scoring and weighting techniques, making it statistically sound and more dependable."
25+
content:
26+
"<b>Solid Methodology:</b> The DDC's methodology has been strengthened by improved scoring and weighting techniques, making it statistically sound and more dependable.",
2227
},
2328
{
24-
content: "<b>Elevated User Experience:</b> Enjoy a smoother experience! We've revamped the DDC's visualizations and usability for a more intuitive and informative exploration.",
25-
content1: "We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape. Stay tuned for further updates!"
29+
content:
30+
"<b>Elevated User Experience:</b> Enjoy a smoother experience! We've revamped the DDC's visualizations and usability for a more intuitive and informative exploration.",
31+
content1:
32+
"We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape. Stay tuned for further updates!",
2633
},
2734
// Add more slides as needed
2835
];
@@ -33,7 +40,7 @@ const PopupMessage = () => {
3340
const totalPages = slides.length;
3441

3542
useEffect(() => {
36-
const hasSeenPopup = localStorage.getItem('hasSeenPopup');
43+
const hasSeenPopup = localStorage.getItem("hasSeenPopup");
3744
if (!hasSeenPopup) {
3845
setIsOpen(true);
3946
}
@@ -53,7 +60,7 @@ const PopupMessage = () => {
5360

5461
const handleClose = () => {
5562
setIsOpen(false);
56-
localStorage.setItem('hasSeenPopup', 'true'); // Store the flag in localStorage
63+
localStorage.setItem("hasSeenPopup", "true"); // Store the flag in localStorage
5764
};
5865

5966
return (
@@ -68,7 +75,10 @@ const PopupMessage = () => {
6875
<div className="relative bg-white rounded-lg shadow-lg overflow-hidden w-full max-w-lg mx-4 md:mx-0 z-10">
6976
<div className="flex justify-between items-center p-4 border-b">
7077
<div className="flex items-center">
71-
<div className="rounded-full bg-blue-100 p-1 flex items-center justify-center" style={{ width: '50px', height: '50px' }}>
78+
<div
79+
className="rounded-full bg-blue-100 p-1 flex items-center justify-center"
80+
style={{ width: "50px", height: "50px" }}
81+
>
7282
<Image src={LogoSVG} alt="UNDP Logo" width={40} height={40} />
7383
</div>
7484
<h2 className="ml-1 text-lg">Digital Development Compass</h2>
@@ -77,35 +87,50 @@ const PopupMessage = () => {
7787
onClick={handleClose}
7888
className="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded"
7989
>
80-
<span className="text-2xl">&times;</span> {/* Unicode cross character */}
90+
<span className="text-2xl">&times;</span>{" "}
91+
{/* Unicode cross character */}
8192
</button>
8293
</div>
8394
<div className="px-4 py-5 sm:p-6">
84-
<h1 className="text-2xl font-bold">
85-
{slides[currentPage].title}
86-
</h1>
87-
<h1 className="text-lg">
88-
{slides[currentPage].title1}
89-
</h1>
90-
<div className="text-gray-600 pt-1" dangerouslySetInnerHTML={{ __html: slides[currentPage].content }} />
91-
<div className="text-gray-600 pt-3" dangerouslySetInnerHTML={{ __html: slides[currentPage].content1 || "" }} />
95+
<h1 className="text-2xl font-bold">{slides[currentPage].title}</h1>
96+
<h1 className="text-lg">{slides[currentPage].title1}</h1>
97+
<div
98+
className="text-gray-600 pt-1"
99+
dangerouslySetInnerHTML={{ __html: slides[currentPage].content }}
100+
/>
101+
<div
102+
className="text-gray-600 pt-3"
103+
dangerouslySetInnerHTML={{
104+
__html: slides[currentPage].content1 || "",
105+
}}
106+
/>
92107
</div>
93108
<div className="px-4 py-4 sm:px-6 flex justify-between items-center border-t">
94-
<button
95-
onClick={handleBack}
96-
className="text-gray-800 hover:bg-gray-200 font-bold py-2 px-4 rounded-l focus:outline-none focus:ring-2 focus:ring-gray-300"
97-
disabled={currentPage === 0}
98-
>
99-
Back
100-
</button>
101-
<span className="text-sm text-gray-600">{`${currentPage + 1} of ${totalPages}`}</span>
102-
<button
109+
{currentPage === 0 ? (
110+
<div className="px-10"></div> // Empty div to maintain layout
111+
) : (
112+
<button
113+
onClick={handleBack}
114+
className="text-gray-800 hover:bg-gray-200 font-bold py-2 px-4 rounded-l focus:outline-none focus:ring-2 focus:ring-gray-300"
115+
>
116+
Back
117+
</button>
118+
)}
119+
<span className="text-sm text-gray-600">{`${
120+
currentPage + 1
121+
} of ${totalPages}`}</span>
122+
123+
{currentPage === totalPages - 1 ? (
124+
<div className="px-8"></div> // Empty div to maintain layout
125+
) : (
126+
<button
103127
onClick={handleNext}
104128
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
105129
disabled={currentPage === totalPages - 1}
106130
>
107131
Next
108132
</button>
133+
)}
109134
</div>
110135
</div>
111136
</div>

0 commit comments

Comments
 (0)