openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { useIsMobile } from "@/hooks/use-mobile";
4import * as Portal from "@radix-ui/react-portal";
5import { Kbd } from "./common/kbd";
6import {
7 Tooltip,
8 TooltipContent,
9 TooltipProvider,
10 TooltipTrigger,
11} from "./ui/tooltip";
12
13export function DevelopmentIndicator() {
14 const isMobile = useIsMobile();
15
16 if (process.env.NODE_ENV !== "production") return null;
17
18 return (
19 <Portal.Root>
20 <div className="pointer-events-none fixed inset-0 z-[9999] border-2 border-destructive" />
21 <div className="fixed inset-x-0 bottom-0 z-[9999] select-none">
22 <div className="flex items-center justify-center">
23 <TooltipProvider delayDuration={0}>
24 <Tooltip>
25 <TooltipTrigger>
26 <div className="w-fit rounded-t bg-destructive px-2 py-1 font-mono text-background text-xs">
27 In Beta
28 </div>
29 </TooltipTrigger>
30 <TooltipContent side="top">
31 {!isMobile ? (
32 <p>
33 Press{" "}
34 <Kbd variant="secondary" className="-me-0 ms-0">
35 F
36 </Kbd>{" "}
37 key to provide feedback.
38 </p>
39 ) : (
40 <p>Use a larger screen to provide feedback.</p>
41 )}
42 </TooltipContent>
43 </Tooltip>
44 </TooltipProvider>
45 </div>
46 </div>
47 </Portal.Root>
48 );
49}