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

"use client";

import React from "react";
import { type ComponentRenderProps } from "@json-render/react";

export function Heading({ element }: ComponentRenderProps) {
  const { text, level } = element.props as {
    text: string;
    level?: string | null;
  };
  const Tag = (level || "h2") as keyof React.JSX.IntrinsicElements;
  const sizes: Record<string, string> = {
    h1: "28px",
    h2: "24px",
    h3: "20px",
    h4: "16px",
  };
  return (
    <Tag
      style={{
        margin: "0 0 16px",
        fontSize: sizes[level || "h2"],
        fontWeight: 600,
      }}
    >
      {text}
    </Tag>
  );
}