@@ -2,6 +2,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
2
2
import { json } from "@remix-run/node" ;
3
3
import { useFetcher } from "@remix-run/react" ;
4
4
import { useCallback , useEffect } from "react" ;
5
+ import { motion } from "framer-motion" ;
5
6
import { LinkButton } from "~/components/primitives/Buttons" ;
6
7
import { Paragraph } from "~/components/primitives/Paragraph" ;
7
8
import { useFeatures } from "~/hooks/useFeatures" ;
@@ -40,35 +41,39 @@ export function IncidentStatusPanel() {
40
41
const interval = setInterval ( fetchIncidents , 60 * 1000 ) ; // 1 minute
41
42
42
43
return ( ) => clearInterval ( interval ) ;
43
- } , [ fetchIncidents ] ) ;
44
+ } , [ ] ) ;
44
45
45
46
const operational = fetcher . data ?. operational ?? true ;
46
47
47
48
return (
48
49
< >
49
50
{ ! operational && (
50
- < div className = "p-1" >
51
+ < motion . div
52
+ initial = { { opacity : 0 } }
53
+ animate = { { opacity : 1 } }
54
+ transition = { { duration : 0.3 } }
55
+ className = "p-1"
56
+ >
51
57
< div className = "flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5" >
52
58
< div className = "flex items-center gap-1 border-b border-warning/20 pb-1 text-warning" >
53
59
< ExclamationTriangleIcon className = "size-4" />
54
60
< Paragraph variant = "small/bright" className = "text-warning" >
55
- Active Incident
61
+ Active incident
56
62
</ Paragraph >
57
63
</ div >
58
- < Paragraph variant = "extra-small/bright" className = "line-clamp-3 text-warning/80" >
59
- We're currently experiencing service disruptions. Our team is actively working on
60
- resolving the issue. Check our status page for real-time updates.
64
+ < Paragraph variant = "extra-small/bright" className = "text-warning/80" >
65
+ Our team is working on resolving the issue. Monitor our status page for updates.
61
66
</ Paragraph >
62
67
< LinkButton
63
68
variant = "secondary/small"
64
69
to = "https://status.trigger.dev"
65
70
target = "_blank"
66
71
fullWidth
67
72
>
68
- View Status Page
73
+ View status page
69
74
</ LinkButton >
70
75
</ div >
71
- </ div >
76
+ </ motion . div >
72
77
) }
73
78
</ >
74
79
) ;
0 commit comments