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

"use client";

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

export function Card({ element, children }: ComponentRenderProps) {
  const { title, description, padding } = element.props as {
    title?: string | null;
    description?: string | null;
    padding?: string | null;
  };

  const paddings: Record<string, string> = {
    none: "0",
    sm: "12px",
    lg: "24px",
  };

  return (
    <div
      style={{
        background: "var(--card)",
        border: "1px solid var(--border)",
        borderRadius: "var(--radius)",
      }}
    >
      {(title || description) && (
        <div
          style={{
            padding: "16px 20px",
            borderBottom: "1px solid var(--border)",
          }}
        >
          {title && (
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>
              {title}
            </h3>
          )}
          {description && (
            <p
              style={{ margin: "4px 0 0", fontSize: 14, color: "var(--muted)" }}
            >
              {description}
            </p>
          )}
        </div>
      )}
      <div style={{ padding: paddings[padding || ""] || "16px" }}>
        {children}
      </div>
    </div>
  );
}