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.
1.8 kB · 58 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859"use client";
import type { RouterOutputs } from "@openstatus/api";import { Tag, Close } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";import { Input } from "@openstatus/ui/components/ui/input";import type { Table } from "@tanstack/react-table";
import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-faceted-filter";
type Monitor = RouterOutputs["monitor"]["list"][number];type MonitorTag = RouterOutputs["monitorTag"]["list"][number];
export interface MonitorDataTableToolbarProps { table: Table<Monitor>; tags: MonitorTag[];}
export function MonitorDataTableToolbar({ table, tags,}: MonitorDataTableToolbarProps) { const isFiltered = table.getState().columnFilters.length > 0;
return ( <div className="flex items-center justify-between"> <div className="flex flex-1 flex-wrap items-center space-x-2"> <Input placeholder="Filter by name, url, type..." value={(table.getState().globalFilter as string) ?? ""} onChange={(event) => table.setGlobalFilter(event.target.value)} className="h-8 w-[150px] lg:w-[250px]" /> {table.getColumn("tags") && ( <DataTableFacetedFilter column={table.getColumn("tags")} title="Tags" options={tags.map((tag) => ({ label: tag.name, value: tag.id, }))} icon={Tag} /> )} {isFiltered && ( <Button variant="ghost" onClick={() => table.resetColumnFilters()} className="h-8 px-2 lg:px-3" > Reset <Close /> </Button> )} </div> </div> );}