Lead Priority Badge & Picker (pipeline/priority-picker.tsx)

vocero-crm · src/components/pipeline/priority-picker.tsx · typescript · MIT
crm, ui, fw:react, tag:priority

Components to render a colored priority badge and a selector that lets users set, change, or clear a lead's priority within a pipeline UI.

// Source: https://github.com/kevinrivm/vocero-crm | License: MIT | Copyright 2026 Kevin Belier
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import { cn } from "@/lib/utils";
import type { PriorityValue } from "@/lib/types";
import { PRIORITY_LABELS, PRIORITY_VALUES } from "@/server/leads/priority";

const TONO: Record<PriorityValue, string> = {
  alta: "border-danger-soft bg-danger-tint text-danger-text",
  media: "border-warning-soft bg-warning-tint text-warning-text",
  baja: "border-border bg-secondary text-text-2",
};

/** Etiqueta de prioridad. Solo se pinta cuando alguien la fijó. */
export function PriorityBadge({ value }: { value: PriorityValue }) {
  return (
    <span
      className={cn(
        "rounded-full border px-1.5 py-0.5 text-[10px] f

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key