json-render/examples/dashboard/components/ui/alert.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 Alert({ element }: ComponentRenderProps) {
  const { message, variant } = element.props as {
    message: string | { path: string };
    variant?: string | null;
  };
  const resolvedMessage = useResolvedValue(message);

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

  return (
    <div
      style={{
        padding: "12px 16px",
        borderRadius: "var(--radius)",
        background: "var(--card)",
        border: "1px solid var(--border)",
        fontSize: 14,
        color: colors[variant || "info"],
      }}
    >
      {resolvedMessage}
    </div>
  );
}