Merge pull request #199 from posadev/fix/error

feat: add error pages and change btn boletos

Author: Yaidi

src/components/SpeakerInfo.tsx

@@ -15,7 +15,7 @@ const SpeakerInfo = () => {
     const navigate = useNavigate()
     const location = useLocation();
     const { speakerId } = useParams();
-    const { speakers, blob } = useAppContext();
+    const { speakers } = useAppContext();
     const speaker = location.state?.speaker as ISpeaker;
     const [currentSpeaker, setCurrentSpeaker] = useState<ISpeaker>()
     const fullUrl = `${window.location.origin}${location.pathname}${location.search}${location.hash}`;
@@ -35,7 +35,7 @@ const SpeakerInfo = () => {
     if (!currentSpeaker) {
         return (
             <div className="flex items-center justify-center min-h-screen">
-                <Loading size={60} gap={4} count={5} />
+                <Loading size={60} count={5} />
             </div>
         );
     }

src/components/Tickets.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import {Ticket} from "lucide-react";
 import DuckIcon from "@/components/ui/duckIcon.tsx";
+import {useNavigate} from "react-router-dom";
 
 const Tickets = () => {
+    const navigate = useNavigate()
   return (
       <section className="flex flex-col items-center gap-8 text-white">
-          <a role="button"
-             href="https://boletos.posadev.org/event/5/posadev"
-             target="_blank"
+          <button role="link"
+             onClick={() => navigate("/boletos")}
              rel="noopener noreferrer"
              className={`self-center flex items-center justify-center flex-row-reverse gap-x-4
               text-primary-500 bg-white hover:bg-primary-100 duration-300 rounded-full
@@ -22,7 +23,7 @@ const Tickets = () => {
                   className="w-8 h-8 md:w-10 md:h-10"
                   aria-hidden="true"
               />
-          </a>
+          </button>
           <h3 className="text-2xl md:text-3xl font-semibold ">Qué incluye tu boleto (General) Posadev 2025</h3>
           <ul className="flex flex-col items-start animate-fade-in text-base md:text-xl text-left gap-1.5">
               <li className="flex items-center justify-start gap-2 ">

src/components/icons/Tree.tsx

@@ -4,6 +4,8 @@ import {getAll} from "@/https/fetch.ts";
 import {AppStatus} from "@/types/types.ts";
 import Loading from "@/pages/Loading.tsx";
 import {addSessionSpeakers} from "@/lib/utils.ts";
+import NotFound from "@/pages/NotFound.tsx";
+import ErrorPage from "@/pages/ErrorPage.tsx";
 
 
 interface AppContextType {
@@ -28,6 +30,8 @@ export const AppProvider = ({ children }) => {
             setSpeakers(getSpeakersWithSessions);
             setBlob(data.blob)
             setAppStatus(AppStatus.Success)
+        }).catch(() => {
+            setAppStatus(AppStatus.Error)
         });
     }, []);
 
@@ -41,16 +45,14 @@ export const AppProvider = ({ children }) => {
     if (appStatus === AppStatus.Loading) {
         return (
             <div className="flex items-center justify-center min-h-screen">
-                <Loading size={60} gap={4} count={5} />
+                <Loading size={60} count={5} />
             </div>
         );
     }
 
     if (appStatus === AppStatus.Error) {
         return (
-            <div className="flex items-center justify-center min-h-screen text-red-500">
-                Error al cargar los datos iniciales 😞
-            </div>
+            <ErrorPage />
         );
     }
 

src/context/AppContext.tsx

@@ -0,0 +1,19 @@
+import Gradient from "@/components/Gradient.tsx";
+import Tree from "@/components/icons/Tree.tsx";
+
+const ErrorPage = () => {
+    return (
+        <Gradient className="min-h-screen flex flex-col gap-4 items-center justify-center text-center">
+            <Tree/>
+            <div className="flex flex-col">
+                <h1 className="text-4xl text-primary-600 font-bold mb-4">404</h1>
+                <p className="text-2xl text-primary-600 mb-4">Oops! Algo salio mal</p>
+                <p className="text-xl text-gray-500 mb-4">
+                    Parece que hubo un problema al cargar la pagina. Por favor, intenta
+                    nuevamente mas tarde.
+                </p>
+            </div>
+        </Gradient>
+    )
+}
+export default ErrorPage;

src/pages/ErrorPage.tsx

@@ -29,7 +29,6 @@ const Loading =({ count = 3, size = 14, text = null })=> {
                     className="h-32 md:h-48 w-auto animate-fade-in mb-4"
                 />
                 {text && <h1 className="text-center text-white text-3xl font-bold md:text-5xl candy-text" style={{ animation: "colorShift 0.2s infinite alternate"}}>{text}</h1>}
-                <h1 className="hidden text-white text-3xl font-bold md:text-5xl candy-text" style={{ animation: "colorShift 1.2s infinite alternate"}}>Cargando</h1>
             </div>
             <div style={{ display: "flex", alignItems: "flex-end" }}>
                 <CaneCandy

src/pages/Loading.tsx

@@ -1,5 +1,7 @@
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
+import Gradient from "@/components/Gradient.tsx";
+import Tree from "@/components/icons/Tree.tsx";
 
 const NotFound = () => {
   const location = useLocation();
@@ -12,15 +14,14 @@ const NotFound = () => {
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+    <Gradient className="min-h-screen flex flex-col gap-4 items-center justify-center text-center">
+        <Tree/>
+        <h1 className="text-4xl text-primary-600 font-bold mb-4">404</h1>
+        <p className="text-xl text-primary-600 mb-4">Oops! Pagina no encontrada</p>
+        <a href="/" className="text-alternative-700 hover:text-alternative-500 underline">
           Return to Home
         </a>
-      </div>
-    </div>
+    </Gradient>
   );
 };