json-render/examples/dashboard/components/ui/badge.tsx

"use client";

import { type ComponentRenderProps } from "@json-render/react";
import { useData } from "@json-render/react";
import { getByPath } from "@json-render/core";

function useResolvedValue<T>(
  value: T | { path: string } | null | undefined,
): T | undefined {
  const { data } = useData();
  if (value === null || value === undefined) return undefined;
  if (typeof value === "object" && "path" in value) {
    return getByPath(data, value.path) as T | undefined;
  }
  return value as T;
}

export function Badge({ element }: ComponentRenderProps) {
  const { text, variant } = element.props as {
    text: string | { path: string };
    variant?: string | null;
  };
  const resolvedText = useResolvedValue(text);

  const colors: Record<string, string> = {
    default: "var(--foreground)",
    success: "#22c55e",
    warning: "#eab308",
    error: "#ef4444",
    info: "var(--muted)",
  };

  return (
    <span
      style={{
        display: "inline-block",
        padding: "2px 8px",
        borderRadius: 12,
        fontSize: 12,
        fontWeight: 500,
        background: "var(--border)",
        color: colors[variant || "default"],
      }}
    >
      {resolvedText}
    </span>
  );
}