Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
4.5 kB · 175 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176"use client";
import { Button } from "@openstatus/ui/components/ui/button";import { Separator } from "@openstatus/ui/components/ui/separator";import { Tooltip, TooltipContent, TooltipTrigger,} from "@openstatus/ui/components/ui/tooltip";import { cn } from "@openstatus/ui/lib/utils";import type { Table } from "@tanstack/react-table";import { Loader, X } from "lucide-react";import * as React from "react";import * as ReactDOM from "react-dom";
export interface DataTableActionBarProps< TData,> extends React.ComponentProps<"div"> { table: Table<TData>; visible?: boolean; container?: Element | DocumentFragment | null;}
function DataTableActionBar<TData>({ table, visible: visibleProp, container: containerProp, children, className, ...props}: DataTableActionBarProps<TData>) { const [mounted, setMounted] = React.useState(false);
React.useLayoutEffect(() => { setMounted(true); }, []);
React.useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { table.toggleAllRowsSelected(false); } }
window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [table]);
const container = containerProp ?? (mounted ? globalThis.document?.body : null);
if (!container) return null;
const visible = visibleProp ?? table.getFilteredSelectedRowModel().rows.length > 0;
return ReactDOM.createPortal( <div> {visible && ( <div role="toolbar" aria-orientation="horizontal" className={cn( "bg-background text-foreground fixed inset-x-0 bottom-6 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-md border p-2 shadow-sm", className, )} {...props} > {children} </div> )} </div>, container, );}
interface DataTableActionBarActionProps extends React.ComponentProps< typeof Button> { tooltip?: string; isPending?: boolean;}
function DataTableActionBarAction({ size = "sm", tooltip, isPending, disabled, className, children, ...props}: DataTableActionBarActionProps) { const trigger = ( <Button variant="secondary" size={size} className={cn( "border-secondary bg-secondary/50 hover:bg-secondary/70 gap-1.5 border [&>svg]:size-3.5", size === "icon" ? "size-7" : "h-7", className, )} disabled={disabled || isPending} {...props} > {isPending ? <Loader className="animate-spin" /> : children} </Button> );
if (!tooltip) return trigger;
return ( <Tooltip> <TooltipTrigger asChild>{trigger}</TooltipTrigger> <TooltipContent sideOffset={6} className="bg-accent text-foreground border font-semibold dark:bg-zinc-900 [&>span]:hidden" > <p>{tooltip}</p> </TooltipContent> </Tooltip> );}
interface DataTableActionBarSelectionProps<TData> { table: Table<TData>;}
function DataTableActionBarSelection<TData>({ table,}: DataTableActionBarSelectionProps<TData>) { const onClearSelection = React.useCallback(() => { table.toggleAllRowsSelected(false); }, [table]);
return ( <div className="flex h-7 items-center rounded-md border pr-1 pl-2.5"> <span className="text-xs whitespace-nowrap"> {table.getFilteredSelectedRowModel().rows.length} selected </span> <Separator orientation="vertical" className="mr-1 ml-2 data-[orientation=vertical]:h-4" /> <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" size="icon" className="size-5" onClick={onClearSelection} > <X className="size-3.5" /> </Button> </TooltipTrigger> <TooltipContent sideOffset={10} className="bg-accent text-foreground flex items-center gap-2 border px-2 py-1 font-semibold dark:bg-zinc-900 [&>span]:hidden" > <p>Clear selection</p> <kbd className="bg-background text-foreground rounded border px-1.5 py-px font-mono text-[0.7rem] font-normal shadow-xs select-none"> <abbr title="Escape" className="no-underline"> Esc </abbr> </kbd> </TooltipContent> </Tooltip> </div> );}
export { DataTableActionBar, DataTableActionBarAction, DataTableActionBarSelection,};