Skip to content

Commit cc879af

Browse files
samejrsamejr
committed
Animate the incident panel
1 parent ac20a5e commit cc879af

File tree

1 file changed

+84
-62
lines changed

1 file changed

+84
-62
lines changed

‎apps/webapp/app/routes/resources.incidents.tsx‎

Lines changed: 84 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
22
import { json } from "@remix-run/node";
33
import { useFetcher } from "@remix-run/react";
4+
import { motion } from "framer-motion";
45
import { useCallback, useEffect } from "react";
56
import { LinkButton } from "~/components/primitives/Buttons";
67
import { Paragraph } from "~/components/primitives/Paragraph";
78
import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
89
import { SimpleTooltip } from "~/components/primitives/Tooltip";
910
import { useFeatures } from "~/hooks/useFeatures";
10-
import { cn } from "~/utils/cn";
1111
import { BetterStackClient } from "~/services/betterstack/betterstack.server";
1212

1313
export async function loader() {
@@ -52,76 +52,98 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
5252
}
5353

5454
return (
55-
<div className="relative">
56-
{/* Expanded: Full incident panel */}
57-
<div
58-
className={cn(
59-
"grid transition-all duration-200 ease-in-out",
60-
isCollapsed ? "grid-rows-[0fr] opacity-0 pointer-events-none" : "grid-rows-[1fr] opacity-100"
61-
)}
62-
>
63-
<div className="overflow-hidden">
64-
<IncidentPanelContent />
65-
</div>
66-
</div>
55+
<Popover>
56+
<div className="p-1">
57+
{/* Expanded panel - animated height and opacity */}
58+
<motion.div
59+
initial={false}
60+
animate={{
61+
height: isCollapsed ? 0 : "auto",
62+
opacity: isCollapsed ? 0 : 1,
63+
}}
64+
transition={{ duration: 0.15 }}
65+
className="overflow-hidden"
66+
>
67+
<div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
68+
{/* Header */}
69+
<div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
70+
<ExclamationTriangleIcon className="size-4" />
71+
<Paragraph variant="small/bright" className="text-warning">
72+
Active incident
73+
</Paragraph>
74+
</div>
6775

68-
{/* Collapsed: Icon button with popover */}
69-
<div
70-
className={cn(
71-
"grid transition-all duration-200 ease-in-out",
72-
isCollapsed ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
73-
)}
74-
>
75-
<div className="overflow-hidden">
76-
<div className="p-1">
77-
<Popover>
78-
<SimpleTooltip
79-
button={
80-
<PopoverTrigger className="flex h-8 w-full items-center justify-center rounded bg-warning/10 transition-colors hover:bg-warning/20">
81-
<ExclamationTriangleIcon className="size-5 text-warning" />
82-
</PopoverTrigger>
83-
}
84-
content="Active incident"
85-
side="right"
86-
sideOffset={8}
87-
buttonClassName="!h-8 w-full"
88-
asChild
89-
disableHoverableContent
90-
/>
91-
<PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
92-
<IncidentPanelContent inPopover />
93-
</PopoverContent>
94-
</Popover>
76+
{/* Description */}
77+
<Paragraph variant="extra-small/bright" className="text-warning/80">
78+
Our team is working on resolving the issue. Check our status page for more
79+
information.
80+
</Paragraph>
81+
82+
{/* Button */}
83+
<LinkButton
84+
variant="secondary/small"
85+
to="https://status.trigger.dev"
86+
target="_blank"
87+
fullWidth
88+
className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
89+
>
90+
<span className="text-warning">View status page</span>
91+
</LinkButton>
9592
</div>
96-
</div>
93+
</motion.div>
94+
95+
{/* Collapsed button - animated height and opacity */}
96+
<motion.div
97+
initial={false}
98+
animate={{
99+
height: isCollapsed ? "auto" : 0,
100+
opacity: isCollapsed ? 1 : 0,
101+
}}
102+
transition={{ duration: 0.15 }}
103+
className="overflow-hidden"
104+
>
105+
<SimpleTooltip
106+
button={
107+
<PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-warning/20 bg-warning/10 transition-colors hover:border-warning/30 hover:bg-warning/20">
108+
<ExclamationTriangleIcon className="size-5 text-warning" />
109+
</PopoverTrigger>
110+
}
111+
content="Active incident"
112+
side="right"
113+
sideOffset={8}
114+
disableHoverableContent
115+
asChild
116+
/>
117+
</motion.div>
97118
</div>
98-
</div>
119+
<PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
120+
<IncidentPopoverContent />
121+
</PopoverContent>
122+
</Popover>
99123
);
100124
}
101125

102-
function IncidentPanelContent({ inPopover = false }: { inPopover?: boolean }) {
126+
function IncidentPopoverContent() {
103127
return (
104-
<div className={cn(!inPopover && "p-1")}>
105-
<div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
106-
<div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
107-
<ExclamationTriangleIcon className="size-4" />
108-
<Paragraph variant="small/bright" className="text-warning">
109-
Active incident
110-
</Paragraph>
111-
</div>
112-
<Paragraph variant="extra-small/bright" className="text-warning/80">
113-
Our team is working on resolving the issue. Check our status page for more information.
128+
<div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
129+
<div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
130+
<ExclamationTriangleIcon className="size-4" />
131+
<Paragraph variant="small/bright" className="text-warning">
132+
Active incident
114133
</Paragraph>
115-
<LinkButton
116-
variant="secondary/small"
117-
to="https://status.trigger.dev"
118-
target="_blank"
119-
fullWidth
120-
className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
121-
>
122-
<span className="text-warning">View status page</span>
123-
</LinkButton>
124134
</div>
135+
<Paragraph variant="extra-small/bright" className="text-warning/80">
136+
Our team is working on resolving the issue. Check our status page for more information.
137+
</Paragraph>
138+
<LinkButton
139+
variant="secondary/small"
140+
to="https://status.trigger.dev"
141+
target="_blank"
142+
fullWidth
143+
className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
144+
>
145+
<span className="text-warning">View status page</span>
146+
</LinkButton>
125147
</div>
126148
);
127149
}

0 commit comments

Comments
 (0)