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.
2.3 kB · 77 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778"use client";
import type { RouterOutputs } from "@openstatus/api";import { Success, Globe, Close } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";import type { Table } from "@tanstack/react-table";
import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-faceted-filter";
type Subscriber = RouterOutputs["pageSubscriber"]["list"][number];
const STATUS_OPTIONS = [ { label: "Active", value: "active" }, { label: "Pending", value: "pending" }, { label: "Unsubscribed", value: "unsubscribed" },];
const SOURCE_OPTIONS = [ { label: "Self-signup", value: "self_signup" }, { label: "Vendor", value: "vendor" }, { label: "Import", value: "import" },];
function filterAvailable<T extends { value: string }>( options: T[], facets: Map<string, number> | undefined,) { if (!facets) return []; return options.filter((option) => facets.has(option.value));}
export function SubscribersDataTableToolbar({ table,}: { table: Table<Subscriber>;}) { const isFiltered = table.getState().columnFilters.length > 0;
const statusFacets = table.getColumn("status")?.getFacetedUniqueValues(); const sourceFacets = table.getColumn("source")?.getFacetedUniqueValues();
const statusOptions = filterAvailable(STATUS_OPTIONS, statusFacets); const sourceOptions = filterAvailable(SOURCE_OPTIONS, sourceFacets);
return ( <div className="flex items-center justify-between"> <div className="flex flex-1 flex-wrap items-center gap-2"> {table.getColumn("status") && statusOptions.length > 0 && ( <DataTableFacetedFilter column={table.getColumn("status")} title="Status" options={statusOptions} icon={Success} /> )} {table.getColumn("source") && sourceOptions.length > 0 && ( <DataTableFacetedFilter column={table.getColumn("source")} title="Source" options={sourceOptions} icon={Globe} /> )} {isFiltered && ( <Button variant="ghost" onClick={() => table.resetColumnFilters()} className="h-8 px-2 lg:px-3" > Reset <Close /> </Button> )} </div> </div> );}