From 7645f7b4a6b571ddecd84e78a5e1d65044878eb0 Mon Sep 17 00:00:00 2001 From: Camilo Vega <59750365+camilovegag@users.noreply.github.com> Date: Tue, 6 Aug 2024 05:34:47 -0500 Subject: [PATCH] 735 better tab error message (#738) * Add better error message * Pass props to handle error message * Add falback props instead of error, implement requested changes * Update props --- .../berlin/src/components/cycles/Cycles.tsx | 16 ++++++++++--- packages/berlin/src/pages/Event.tsx | 24 +++++++++++++++++-- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/berlin/src/components/cycles/Cycles.tsx b/packages/berlin/src/components/cycles/Cycles.tsx index 926b5f9f..2da49123 100644 --- a/packages/berlin/src/components/cycles/Cycles.tsx +++ b/packages/berlin/src/components/cycles/Cycles.tsx @@ -1,14 +1,20 @@ import { GetCycleResponse } from 'api'; import { Body } from '../typography/Body.styled'; import { useNavigate } from 'react-router-dom'; +import { CalendarX2 } from 'lucide-react'; +import Button from '../button'; type CyclesProps = { cycles: GetCycleResponse[] | undefined; - errorMessage: string; eventId: string | undefined; + fallback: { + message: string; + buttonMessage: string; + buttonOnClick: () => void; + }; }; -function Cycles({ cycles, errorMessage, eventId }: CyclesProps) { +function Cycles({ cycles, eventId, fallback }: CyclesProps) { const navigate = useNavigate(); const formatDate = (date: string) => { @@ -34,7 +40,11 @@ function Cycles({ cycles, errorMessage, eventId }: CyclesProps) { )) ) : ( - {errorMessage} +
+ + {fallback.message} + +
)} ); diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx index 7f9fb6b5..7846f9af 100644 --- a/packages/berlin/src/pages/Event.tsx +++ b/packages/berlin/src/pages/Event.tsx @@ -48,8 +48,28 @@ function Event() { const [activeTab, setActiveTab] = useState('upcoming'); const tabs = { - upcoming: , - past: , + upcoming: ( + setActiveTab('past'), + }} + /> + ), + past: ( + setActiveTab('upcoming'), + }} + /> + ), }; return (