File "NoInternet.tsx"
Full Path: /home/trinadezambia/public_html/student_panel/src/components/shared/common/NoInternet.tsx
File size: 11.17 KB
MIME-type: text/x-java
Charset: utf-8
'use client';
import { useEffect, useState } from 'react';
/**
* NoInternet Component
*
* This component displays a full-screen overlay when there's no internet connection.
* It uses the exact SVG design from no-internet.svg file (inlined to work offline).
*
* Features:
* - Full screen overlay
* - Inlined SVG illustration from your design file (works offline!)
* - Try Again button to refresh
* - Auto-dismiss when connection is restored
*/
export default function NoInternet() {
const [isVisible, setIsVisible] = useState(true);
// Add a small delay before showing to avoid flash on initial load
useEffect(() => {
const timer = setTimeout(() => {
setIsVisible(true);
}, 100);
return () => clearTimeout(timer);
}, []);
// Handle try again button click
const handleTryAgain = () => {
// Reload the page to check connection again
window.location.reload();
};
if (!isVisible) return null;
return (
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white">
{/* Content Container */}
<div className="text-center px-4 max-w-2xl mx-auto">
{/* Illustration - Your exact SVG inlined so it works offline */}
<div className="mb-8 flex justify-center">
<svg
className="w-full max-w-lg h-auto"
viewBox="0 0 525 544"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* Full SVG content from no-internet.svg */}
<path
d="M159.021 124.936H105.888C102.782 124.936 99.9388 123.809 97.7441 121.94C95.028 119.628 93.3047 116.18 93.3047 112.329C93.3047 108.848 94.7134 105.696 96.9904 103.415C99.2674 101.134 102.414 99.7227 105.888 99.7227H159.021C162.495 99.7227 165.642 101.134 167.919 103.415C170.196 105.696 171.604 108.848 171.604 112.329C171.604 115.811 170.196 118.962 167.919 121.243C165.642 123.525 162.495 124.936 159.021 124.936Z"
fill="#D8E2F4"
/>
<path
d="M146.429 108.23C148.866 97.9713 142.535 87.6705 132.288 85.2227C122.042 82.7749 111.76 89.1071 109.323 99.366C106.886 109.625 113.217 119.926 123.463 122.373C133.71 124.821 143.992 118.489 146.429 108.23Z"
fill="#D8E2F4"
/>
<path
d="M408.106 84.6995H315.2C309.123 84.6995 303.622 82.2324 299.64 78.243C295.659 74.2535 293.195 68.7426 293.195 62.656C293.195 58.3148 294.448 54.2669 296.611 50.8552C300.513 44.6975 307.38 40.6113 315.2 40.6113H408.106C414.183 40.6113 419.683 43.0784 423.665 47.0678C427.647 51.0573 430.109 56.5683 430.109 62.656C430.109 68.3344 427.966 73.512 424.446 77.42C420.419 81.8904 414.59 84.6995 408.106 84.6995Z"
fill="#D8E2F4"
/>
<path
d="M377.228 71.3538C390.248 58.3102 390.248 37.1624 377.228 24.1188C364.208 11.0752 343.098 11.0752 330.078 24.1188C317.059 37.1624 317.059 58.3102 330.078 71.3538C343.098 84.3974 364.208 84.3974 377.228 71.3538Z"
fill="#D8E2F4"
/>
<path
d="M174.889 189.043C174.889 189.043 169.309 184.321 168.895 184.623C168.48 184.926 169.121 187.608 169.121 187.608C169.121 187.608 165.351 184.775 163.73 186.361C162.109 187.947 166.935 198.522 171.685 199.806L174.889 189.043Z"
fill="#FFAA9D"
/>
<path
d="M364.41 183.599C364.41 183.599 369.991 178.877 370.405 179.18C370.82 179.482 370.179 182.163 370.179 182.163C370.179 182.163 373.949 179.33 375.57 180.917C377.191 182.504 372.365 193.079 367.615 194.363L364.41 183.599Z"
fill="#FFAA9D"
/>
<path
d="M371.481 192.813L364.39 182.428C352.023 189.533 334.566 189.897 313.29 184.068C297.718 179.801 286.84 175.145 269.426 175.145C252.011 175.145 234.897 187.486 226.23 189.861C204.954 195.69 187.497 195.326 175.13 188.221L168.039 198.604C168.039 198.604 197.06 223.124 239.964 216.537C238.906 230.961 236.53 253.019 237.261 256.42C238.978 264.405 298.774 264.769 301.671 255.674C302.52 253.006 298.508 225.028 297.908 210.482C341.715 217.967 371.481 192.813 371.481 192.813Z"
fill="#22577A"
/>
<path
d="M285.211 161.604L285.346 170.598L284.005 170.555C284.005 170.555 282.931 177.998 277.686 176.822C276.178 176.485 274.254 175.207 273.7 175.462C273.043 175.766 272.76 177.803 272.61 178.391C272.039 180.644 264.168 178.368 265.444 176.059C266.656 173.867 268.462 170.874 268.079 170.042C266.746 167.143 266.367 159.945 273.6 157.538C279.363 155.622 285.146 158.527 285.211 161.604Z"
fill="#FFAA9D"
/>
<path
d="M265.444 176.058C266.656 173.866 268.462 170.873 268.079 170.041C268.079 170.041 271.117 174.722 273.921 175.43L273.936 175.436C273.845 175.431 273.762 175.433 273.7 175.461C273.043 175.765 272.76 177.802 272.61 178.39C272.039 180.643 264.168 178.367 265.444 176.058Z"
fill="#FF9F91"
/>
<path
d="M273.073 166.015C269.692 165.436 271.792 172.983 268.067 172.731C264.342 172.479 261.746 164.323 264.48 158.032C267.213 151.742 272.413 152.092 277.368 152.95C282.323 153.808 288.396 156.053 288.394 159.806C288.385 168.839 277.714 161.261 277.009 163.977C276.464 166.077 275.624 172.152 277.799 172.293C279.973 172.433 282.186 170.637 283.903 171.098C284.892 171.363 287.612 183.211 280.502 183.606C273.468 183.997 271.687 177.777 273.17 172.697C274.58 167.864 274.723 166.298 273.073 166.015Z"
fill="#14336A"
/>
<path
d="M201.786 298.821C189.904 298.821 176.309 292.334 165.417 281.469C154.492 270.57 147.972 256.911 147.973 244.93C147.975 237.579 153.888 232.855 159.606 228.287C165.294 223.744 170.667 219.453 170.947 212.801C171.109 208.928 169.525 206.361 167.846 203.643C166.005 200.663 164.1 197.58 164.484 192.851C165.16 184.532 172.603 176.87 186.607 170.073C187.319 169.729 188.178 170.025 188.524 170.74C188.869 171.454 188.571 172.314 187.858 172.66C174.832 178.981 167.932 185.853 167.343 193.084C167.036 196.87 168.542 199.309 170.286 202.131C172.034 204.961 174.013 208.166 173.813 212.921C173.478 220.883 167.336 225.79 161.394 230.535C155.968 234.869 150.844 238.963 150.842 244.93C150.841 256.164 157.046 269.061 167.442 279.432C177.808 289.773 190.647 295.947 201.786 295.947C202.579 295.947 203.221 296.59 203.221 297.384C203.221 298.179 202.579 298.821 201.786 298.821Z"
fill="#4FC7A0"
/>
<path
d="M331.887 294.414C331.132 294.414 330.499 293.824 330.455 293.059C330.411 292.267 331.015 291.587 331.806 291.542C401.9 287.519 413.791 245.898 415.767 233.238C418.533 215.502 412.252 198.352 401.463 194.193C398.154 192.916 395.262 194.523 391.915 196.384C388.774 198.129 385.528 199.934 381.699 199.247C373.91 197.849 368.026 187.744 363.707 168.355C363.534 167.581 364.021 166.812 364.794 166.64C365.572 166.462 366.334 166.955 366.507 167.729C370.49 185.61 375.771 195.263 382.205 196.418C385.024 196.925 387.697 195.441 390.524 193.871C393.995 191.94 397.927 189.751 402.495 191.512C414.694 196.214 421.618 214.343 418.601 233.682C416.542 246.881 404.211 290.264 331.971 294.412C331.942 294.413 331.914 294.414 331.887 294.414Z"
fill="#4FC7A0"
/>
<path
d="M185.387 282.155C185.387 256.885 205.836 236.398 231.061 236.398H301.846C327.071 236.398 347.52 256.885 347.52 282.155V504.292H185.387V282.155Z"
fill="white"
/>
<path
d="M347.522 498.615C345.937 498.615 344.652 497.329 344.652 495.741V263.615C344.652 250.192 333.752 239.272 320.354 239.272H212.556C199.157 239.272 188.258 250.192 188.258 263.615V485.607C188.258 487.193 186.972 488.482 185.389 488.482C183.804 488.482 182.52 487.193 182.52 485.607V263.615C182.52 247.023 195.993 233.523 212.556 233.523H320.354C336.915 233.523 350.39 247.023 350.39 263.615V495.741C350.39 497.329 349.106 498.615 347.522 498.615Z"
fill="#E0E9F3"
/>
<path
d="M213.543 258.56C213.543 261.499 211.165 263.882 208.231 263.882C205.296 263.882 202.918 261.499 202.918 258.56C202.918 255.621 205.296 253.238 208.231 253.238C211.165 253.238 213.543 255.621 213.543 258.56Z"
fill="#E0E9F3"
/>
<path
d="M279.878 392.29C280.924 385.828 276.54 379.738 270.087 378.688C263.634 377.637 257.555 382.024 256.51 388.486C255.465 394.947 259.848 401.037 266.301 402.087C272.754 403.138 278.833 398.751 279.878 392.29Z"
fill="#22577A"
/>
<path
d="M268.19 371.081C275.249 371.081 281.433 374.904 284.789 380.591L292.379 376.111C291.188 374.092 289.734 372.209 288.035 370.506C282.734 365.196 275.686 362.271 268.19 362.271C260.693 362.271 253.645 365.196 248.344 370.506C246.645 372.209 245.192 374.092 244 376.111L251.591 380.591C254.948 374.904 261.131 371.081 268.19 371.081Z"
fill="#22577A"
/>
<path
d="M268.19 354.548C281.294 354.548 292.773 361.645 299.004 372.201L306.596 367.721C304.693 364.487 302.389 361.505 299.705 358.816C295.613 354.717 290.847 351.498 285.539 349.249C280.042 346.919 274.205 345.738 268.19 345.738C262.175 345.738 256.338 346.919 250.841 349.249C245.533 351.498 240.767 354.717 236.675 358.816C233.991 361.505 231.688 364.487 229.785 367.721L237.376 372.201C243.607 361.645 255.087 354.548 268.19 354.548Z"
fill="#22577A"
/>
<path
d="M268.19 339.429C286.822 339.429 303.146 349.517 312.006 364.527L319.604 360.043C317.057 355.714 313.969 351.725 310.376 348.125C304.899 342.637 298.519 338.328 291.414 335.318C284.056 332.2 276.242 330.619 268.19 330.619C260.138 330.619 252.325 332.2 244.967 335.318C237.862 338.328 231.483 342.637 226.005 348.125C222.412 351.725 219.324 355.714 216.777 360.043L224.375 364.527C233.235 349.517 249.559 339.429 268.19 339.429Z"
fill="#22577A"
/>
<path
d="M298.799 394.644L304.168 388.73C305.344 387.434 305.249 385.428 303.956 384.249C302.662 383.07 300.66 383.166 299.483 384.462L294.519 389.93L289.555 384.462C288.379 383.166 286.377 383.07 285.083 384.249C283.789 385.428 283.694 387.434 284.871 388.73L290.24 394.644L284.871 400.558C283.694 401.854 283.789 403.86 285.083 405.039C285.689 405.592 286.452 405.864 287.212 405.864C288.072 405.864 288.93 405.515 289.555 404.826L294.519 399.358L299.483 404.826C300.108 405.515 300.965 405.864 301.827 405.864C302.587 405.864 303.349 405.592 303.956 405.039C305.249 403.86 305.344 401.854 304.168 400.558L298.799 394.644Z"
fill="#EB4E19"
/>
</svg>
</div>
{/* Main Heading */}
<h1 className="text-2xl md:text-3xl font-bold text-[#1A1A1A] mb-4">
No Internet Connection
</h1>
{/* Description */}
<p className="text-gray-600 text-base md:text-lg mb-8">
Please check your network and try again.
</p>
{/* Try Again Button */}
<button
onClick={handleTryAgain}
className="px-8 py-3 bg-[#3B5998] text-white font-semibold rounded-lg hover:bg-[#2d4373] transition-colors duration-200 shadow-md"
>
Try Again
</button>
</div>
</div>
);
}