openstatus.dev
Openstatus
www.openstatus.dev
feat: add tooltip to status widget container (#519)
authored by
Maximilian Kaske
and committed by
GitHub
b4a03b65
fcadac0c
+34
-4
+7
-3
apps/docs/packages/react.mdx
+7
-3
apps/docs/packages/react.mdx
···
1
+
Install the [npm](https://www.npmjs.com/package/@openstatus/react) package:
2
+
3
+
```bash
4
+
npm install @openstatus/react
5
+
```
6
+
1
7
## React Server Component
2
8
3
9
```tsx
···
55
61
// ^StatusResponse = { status: Status }
56
62
57
63
const { status } = res;
58
-
// ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance"
64
+
// ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "incident"
59
65
60
66
return <div>{/* customize */}</div>;
61
67
}
62
68
```
63
-
64
-
[Link to npm](https://www.npmjs.com/package/@openstatus/react)
+27
-1
apps/web/src/components/layout/status-widget-suspense.tsx
+27
-1
apps/web/src/components/layout/status-widget-suspense.tsx
···
1
1
import { Suspense } from "react";
2
+
import { ExternalLink } from "lucide-react";
2
3
3
4
import type { StatusWidgetProps } from "@openstatus/react";
4
5
import { StatusWidget } from "@openstatus/react";
6
+
import {
7
+
Button,
8
+
Tooltip,
9
+
TooltipContent,
10
+
TooltipProvider,
11
+
TooltipTrigger,
12
+
} from "@openstatus/ui";
5
13
6
14
export function StatusWidgetFallback() {
7
15
return (
···
15
23
export function StatusWidgetContainer(props: StatusWidgetProps) {
16
24
return (
17
25
<Suspense fallback={<StatusWidgetFallback />}>
18
-
<StatusWidget {...props} />
26
+
<TooltipProvider>
27
+
<Tooltip>
28
+
<TooltipTrigger asChild>
29
+
<div className="max-w-min">
30
+
<StatusWidget {...props} />
31
+
</div>
32
+
</TooltipTrigger>
33
+
<TooltipContent asChild>
34
+
<Button variant="link" size="sm" asChild>
35
+
<a
36
+
target="_blank"
37
+
href="https://docs.openstatus.dev/packages/react"
38
+
>
39
+
Install your own <ExternalLink className="ml-1 h-3 w-3" />
40
+
</a>
41
+
</Button>
42
+
</TooltipContent>
43
+
</Tooltip>
44
+
</TooltipProvider>
19
45
</Suspense>
20
46
);
21
47
}