mintel.me/apps/web/src/payload/blocks/MetricBarBlock.ts

import { MintelBlock } from "./types";

import type { Block } from "payload";

export const MetricBarBlock: MintelBlock = {
  slug: "metricBar",
  labels: {
    singular: "Metric Bar",
    plural: "Metric Bars",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "MetricBar",
    description:
      "Animated horizontal progress bar. Use multiple in sequence to compare metrics. IMPORTANT: value MUST be a real number > 0, never use 0 or placeholder values. Props: label, value (number), max (default 100), unit (default %), color (red|green|blue|slate).",
    usageExample: '<MetricBar label="WordPress Sites" value={33',
  },
  fields: [
    {
      name: "label",
      type: "text",
      required: true,
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für label ein.",
      },
    },
    {
      name: "value",
      type: "number",
      required: true,
      admin: { description: "Percentage 0-100" },
    },
    {
      name: "max",
      type: "number",
      defaultValue: 100,
      admin: { description: "Tragen Sie einen numerischen Wert für max ein." },
    },
    {
      name: "unit",
      type: "text",
      defaultValue: "%",
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für unit ein.",
      },
    },
    {
      name: "color",
      type: "text",
      admin: {
        components: { Field: "@/src/payload/components/ColorPicker" },
        description: "Geben Sie den Text für color ein.",
      },
    },
  ],
};